學會如何操作 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="刪除" onclick='deleteRow(this)' />
作為刪除某一列的按鈕。
先來讓「增加一列」的按鈕起作用：
$('#add_button').click(function(e){ $('tbody').append("<tr>" + "<td>...</td>" + "<td>...</td>" + "<td><input type='button' value='刪除' onclick='deleteRow(this)' /></td></tr>"); });
上面這一段 code，就是當 #add_button 在按下時，會在 <tbody> 中增加一列的 code，這裡用到了 jQuery.append 的函式來加入 HTML 至某元素中。
增加一列沒問題了，那就來讓「刪除」的按鈕也能作用吧，在我上面的寫法，是按下後去呼叫 deleteRow() 這個自行定義的函式，傳入的參數則是被按下的那個按鈕：
function deleteRow(elem) { // 先抓到是哪一個 tr var row = $(elem).parent().parent(); // 移除它 row.fadeOut('normal', function() { row.remove(); }); }
很簡單對吧！因為我們 HTML code 的結構是如此，所以對任何一個「刪除」的按鈕來說，要取得它所在的 row，往上兩層找就對了（往上一層是 td），所以拿到的 row 便是代表該 row 的 jQuery 物件，所以下面才能用 fadeOut 作淡出的特效，並在特效結束後，用 remove 將它從 DOM 中拔除。
最後，如果要在按下「完成輸入」按鈕後，算出這個 table UI 究竟有幾個 row，那可以這麼作：
$('#complete_button').click(function(e) { alert("一共有 "+ $('tbody').children('tr').length + " 列資料"); });
直接用 jQuery.children() 函式中便可以直接取得一個陣列，而陣列內的元素就是 selector 內下一層的所有元素，所以我直接就拿陣列的長度來算共有幾列了。至於 jQuery.children() (或 parent() 也是)，你不傳參數進去就是單純地找下（上）一層的元素，如果加入了 selector 字串當參數，那就會就找下（上）一層中，符合 selector 字串的元素。
如果對於 DOM 物件的操作有一定程度熟悉的話，那你也具備了能自己寫 UI 的能力囉。
歷史上的今天
- 直接上 WordPress SVN - 2007
文章分類: 
標籤: 
