jQuery 學習筆記 (6) — 操作 DOM 物件

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

DOM (Document Object Model) 的定義就請您到維基百科上查看定義,簡單地說,你可以想像一份 HTML 或 XML 等相關文件都是一種 DOM,而文件裡的每個 tag 都是 DOM 中的一個元素 (element) 或節點 (node),舉例來說, 就是一份 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,內容是使用

來作表格的輸入等等,使用者可以動態新增或刪除表格中某一列,當最後按下按鈕要完成輸入時,該怎麼處理這樣的一個表格呢?

假設你的 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 的能力囉。