學會如何操作 DOM 物件是自己寫 Web UI 的基礎。

DOM (Document Object Model) 的定義就請您到維基百科上查看定義，簡單地說，你可以想像一份 HTML 或 XML 等相關文件都是一種 DOM，而文件裡的每個 tag 都是 DOM 中的一個元素 (element) 或節點 (node)，舉例來說， 就是一份 HTML 文件中的一個元素。

目前的 JavaScript 標準提供下列 API 來取得一份 DOM 中的元素：

直接取得 DOM 中元素的原始 API 就這三個，如果你想任意地取得頁面中的物件，光靠這三個 API 是很辛苦的，所以 jQuery 能支援直接用 CSS selector 的方式來選擇物件真是在作功德呀！

完整的 jQuery selector 支援可以直接在 API文件 - Selector 中看到目前支援的部份，也許可以做一張 cheat sheet 在 coding 時便於查找。

如果今天你用 JavaScript 作了一個 UI，內容是使用
來作表格的輸入等等，使用者可以動態新增或刪除表格中某一列，當最後按下按鈕要完成輸入時，該怎麼處理這樣的一個表格呢？

假設你的 UI 會產生這樣的 code:

... ...

...

從上述的程式碼來看，我在表格的標頭部份放了一個：

這是用來為表格增加一列所使用的按鈕。而在每一列中，也有：

作為刪除某一列的按鈕。

先來讓「增加一列」的按鈕起作用：

$('#add_button').click(function(e){
$('tbody').append("

" +
" ...

" +
" ...

" +
"

");
});

上面這一段 code，就是當 #add_button 在按下時，會在
中增加一列的 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 的能力囉。