標題 jQuery 學習筆記 (6) — 操作 DOM 物件
時間 2011年11月02日 Wed. AM 09:08:52
http://blog.ericsk.org/archives/847
jQuery 學習筆記 (6) — 操作 DOM 物件
學會如何操作 DOM 物件是自己寫 Web UI 的基礎。
DOM (Document Object Model) 的定義就請您到維基百科上查看定義，簡單地說，你可以想像一份 HTML 或 XML 等相關文件都是一種 DOM，而文件裡的每個 tag 都是 DOM 中的一個元素 (element) 或節點 (node)，舉例來說，<body> 就是一份 HTML 文件中的一個元素。
目前的 JavaScript 標準提供下列 API 來取得一份 DOM 中的元素：
document.getElementById: 根據傳入的值，找到 DOM 中 id 為該值的元素。document.getElementsByTagName: 傳回一個陣列，陣列內元素為 tag 名稱符合傳入的參數。document.getElementsByName: 傳回一個陣列，陣列元素的 name 屬性值符合傳入的參數。
直接取得 DOM 中元素的原始 API 就這三個，如果你想任意地取得頁面中的物件，光靠這三個 API 是很辛苦的，所以 jQuery 能支援直接用 CSS selector 的方式來選擇物件真是在作功德呀！
完整的 jQuery selector 支援可以直接在 API文件 – Selector 中看到目前支援的部份，也許可以做一張 cheat sheet 在 coding 時便於查找。
走訪 DOM 元素的結構
如果今天你用 JavaScript 作了一個 UI，內容是使用 <table> 來作表格的輸入等等，使用者可以動態新增或刪除表格中某一列，當最後按下按鈕要完成輸入時，該怎麼處理這樣的一個表格呢？
假設你的 UI 會產生這樣的 code:
<table>
<thead>
<tr>
<th colspan="2"> </th>
<th><input type="button" value="增加一列" id="add_button"/></th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
<td><input type="button" value="刪除" onclick='deleteRow(this)' /></td>
</tr>
...
</tbody>
</table>
<input type="button" value="完成輸入" id="complete_button"/>
從上述的程式碼來看，我在表格的標頭部份放了一個：
<input type="button" value="增加一列" id="add_button"/>
這是用來為表格增加一列所使用的按鈕。而在每一列中，也有：
<input type="button" value="刪除" on_click ='deleteRow(this)' />
作為刪除某一列的按鈕。
先來讓「增加一列」的按鈕起作用：
$('#add_button').click(function(e){"<td>...</td>" +
"<td>...</td>" +
});
上面這一段 code，就是當 #add_button 在按下時，會在 <tbody> 中增加一列的 code，這裡用到了 jQuery.append 的函式來加入 HTML 至某元素中。
增加一列沒問題了，那就來讓「刪除」的按鈕也能作用吧，在我上面的寫法，是按下後去呼叫 deleteRow() 這個自行定義的函式，傳入的參數則是被按下的那個按鈕：
function deleteRow(elem) {
// 先抓到是哪一個 tr
// 移除它
row.remove();
});
}
很簡單對吧！因為我們 HTML code 的結構是如此，所以對任何一個「刪除」的按鈕來說，要取得它所在的 row，往上兩層找就對了（往上一層是 td），所以拿到的 row 便是代表該 row 的 jQuery 物件，所以下面才能用 fadeOut 作淡出的特效，並在特效結束後，用 remove 將它從 DOM 中拔除。
最後，如果要在按下「完成輸入」按鈕後，算出這個 table UI 究竟有幾個 row，那可以這麼作：
$('#complete_button').click(function(e) {
" 列資料");
});
直接用 jQuery.children() 函式中便可以直接取得一個陣列，而陣列內的元素就是 selector 內下一層的所有元素，所以我直接就拿陣列的長度來算共有幾列了。至於 jQuery.children() (或 parent() 也是)，你不傳參數進去就是單純地找下（上）一層的元素，如果加入了 selector 字串當參數，那就會就找下（上）一層中，符合 selector 字串的元素。
如果對於 DOM 物件的操作有一定程度熟悉的話，那你也具備了能自己寫 UI 的能力囉。
--
※ 編輯: ott 時間: 2011-11-02 09:18:40