weidagang2046的專欄

　　第一次翻譯技術文章，本身英語水平很爛，翻譯的也是自己剛開始學習的技術，所以能勉強看懂英文的話都要盡量讀 原文 而不要看我的翻譯，免得被誤導。閱讀原文

簡介
　　這篇文章簡單介紹了DOM 1.0一些基本而強大的方法以及如何在JavaScript中使用它們。你可以學到如何動態(tài)地創(chuàng)建、獲取、控制和刪除HTML元素。這些DOM方法同樣適用于XML。所有全面支持DOM 1.0的瀏覽器都能很好地運行本篇的實例，比如IE5，F(xiàn)irefox等。
概況 － Sample1.html
　　這篇文章通過實例代碼介紹DOM。請從嘗試下面的HTML例子開始。它使用DOM 1的方法由JavaScript動態(tài)創(chuàng)建一個HTML表格。它創(chuàng)建一個由四個包含文本內容的單元格組成的小表格。單元格的文字內容是：“單元格是第y行第x列”，表示單元格在表格中的行數(shù)和列數(shù)。

注意我們創(chuàng)建各元素和文字節(jié)點的順序：

1.創(chuàng)建< table >元素
2.創(chuàng)建< table >的子元素< tbody >
3.使用一個循環(huán)來創(chuàng)建< tbody >的子元素< tr >
4.分別使用循環(huán)為每一個< tr >創(chuàng)建子元素< tb >
5.為每一個< tb >創(chuàng)建文本節(jié)點

　　創(chuàng)建完< table >,< tbody >,< tr >,< td >元素和文本節(jié)點，我們使用相反的順序把它們分別添加到自己的父節(jié)點。
1.將創(chuàng)建的文本節(jié)點添加到< td >里

2.將列< td >添加到行< tr >

3.將行< tr >添加到< tbody >

4.將< tbody >添加到< table >

5.將< table >添加到< body >

記住這個方法。當你使用W3C DOM時會經(jīng)常用到它。首先，你從上向下建立元素；然后從下向上把它們添加到父節(jié)點。
這是JavaScript代碼生成的HTML：

這是代碼生成的表格元素和它的子元素的DOM對象樹：

　　你只需使用少量的DOM方法就可以構造這樣一個表格和他的子元素。記住要時刻謹記你將創(chuàng)建的構造的模型樹；這樣會使編寫代碼更加簡單。在圖中的< table >樹里，< table >有一個子元素< tbody >。< tbody >有兩個子元素。< tbody >的每個子元素（< tr >）都有兩個子元素< td >。最后，每個< td >有一個子元素：一個文本節(jié)點。　　

基本的DOM方法 － Sample2.html
　　getElementByTagName方法適用于文檔和元素，所以文檔根對象和所有的元素對象一樣有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 來獲取某個元素所有子元素的列表，使用標簽名選擇它們。
　　element.getElementsByTagName 返回一個有特定標簽名的子元素的列表。你可以通過調用一個item方法（傳遞一個index參數(shù)給它）來從這個子元素列表中獲取一個元素。請注意列表第一個子元素的index為0。下一個主題繼續(xù)前面的Table例子。下面這個實例更加簡單，顯示了一些基本的方法：

在這個例子里，我們設置myP變量為表示body里第二個p元素的DOM對象。
1.獲取一個包含所有body元素的列表

因為一個有效的html文檔只有一個body元素，這個列表講只有一項。我們通過使用 [0] 選取列表的第一個元素來得到它。
2.獲取blog子元素里所有的p元素

3.選取p元素列表的第二項

一旦獲得一個html元素的DOM對象，你就可以設置它的屬性。比如，你想設置style background color屬性，只需要添加：

使用document.createTextNode(”..”)創(chuàng)建文本節(jié)點
使用文檔對象調用createTextNode方法建立你的文本節(jié)點。你只需要輸入文本內容。返回值是一個表示這個文本節(jié)點的對象。

以上代碼創(chuàng)建一個文本數(shù)據(jù)是“word”的TEXT_NODE類型（文字塊）節(jié)點，變量myTextNode指向這個節(jié)點對象。你需要設置這個文本節(jié)點為其他節(jié)點元素的字節(jié)點來插入這個文本到你的html頁面里。
使用appendChild(..)插入元素
所以，通過調用myP.appendChild([node_element])，你設置這個文本節(jié)點為第二個p元素的字節(jié)點。

測試這個例子，注意“hello”和“world”兩個詞是連在一起的：“helloworld”。所以在當你看到html頁面時兩個文本節(jié)點hello和world看起來好像是一個節(jié)點，而實際上在這個文檔模型里有兩個節(jié)點。第二個節(jié)點是一個新的TEXT_NODE類型節(jié)點，并且是第二個p標簽的第二個字節(jié)點。下圖在文檔樹里顯示了剛創(chuàng)建的文本節(jié)點。

createTextNode和appendChild是在hello和world之間添加空格的一種簡單的方法。需要特別注意的是appendChild方法將添加在最后一個子節(jié)點后面，就像world被添加到hello后面。所以如果你想在hello和world之間添加一個文本節(jié)點需要使用insertBefore方法而不是appendChild。

使用文檔對象和createElement(..)方法創(chuàng)建新元素
　　你可以使用createElement方法創(chuàng)建新的HTML元素或者其他任何你想要的其他元素。例如，如果你想為< body >元素添加一個字節(jié)點< p >元素，可以使用前例中的myBody添加一個新的元素節(jié)點。創(chuàng)建一個節(jié)點只需要調用document.createElement(”tagname”)。例如：

使用removeChild(..)方法刪除節(jié)點
　　每個節(jié)點都可以刪除。下面這行代碼刪除myP（第二個< p >元素）里包含單詞world的文本節(jié)點。

　　最后你可以把包含單詞world的文本節(jié)點myTextNode添加到新創(chuàng)建的< p >元素里：

　　修正的對象樹最后像這樣：

動態(tài)創(chuàng)建一個表格（回到Sample1.html）
　　文章的剩余部分將回到Sample1.html。下圖顯示了例子中創(chuàng)建的表格的對象樹結構。
回顧HTML表格結構

創(chuàng)建元素節(jié)點并把它們添加到文檔樹
創(chuàng)建sample1.html里的表格的基本步驟：

• 獲取body對象（文檔對象的第一項）
• 創(chuàng)建所有的元素
• 最后，按照上圖的表格結構添加每一個字節(jié)點下面的源代碼是sample1.html的注釋

start函數(shù)的最后有一行新代碼，使用另一個DOM方法setAttribute設置了表格的border屬性。setAttribute方法有兩個參數(shù)：屬性名和屬性值。你可以使用setAttribute方法設置任何元素的任何屬性。

使用DOM和CSS處理表格
從表格中獲取一個文本節(jié)點
　　這個例子介紹兩個新的DOM屬性。首先使用childNodes屬性獲取mycel的字節(jié)點列表。這個childNodes列表包含所有的字節(jié)點，不管它們的名稱和類型是什么。像getElementsByTagName方法一樣，它返回一個字節(jié)點列表，使用 [ x ] 來獲取想要的字節(jié)點項。這個例子將myceltext存儲為表格第二行第二個單元格的文本節(jié)點。最后，它創(chuàng)建一個新的包含myceltext 的data 屬性 的文本節(jié)點，并使它成為< body >元素的子節(jié)點，來顯示這個例子的最后結果。

如果你的對象是文本節(jié)點，你可以使用data屬性來獲取它的內容

獲取一個屬性值
　　在sample1的最后有一個單元格使用了mytable對象的setAttribute方法。這個單元格用來設置這個表格的border屬性。使用getAttribute方法來獲取這個屬性：

通過改變style屬性隱藏列
　　當你使用一個JavaScript變量指向對象，你可以立即設置它的style屬性。下面的代碼是sample1.html的修改，第二列的單元格都被隱藏，第一列的單元格背景改為紅色。注意style屬性是直接設置的。