首頁 > 開發者 > JavaScript
文檔對象模式（Document Object Model DOM）用來描述HTML頁面中那些輸入框、圖片、段落等等元素與最頂級的結構document之間的關係。用適當的方法來選取這些元素，我們就可以改變他們。
在這一章我主要介紹已經被新一代的瀏覽器所支援的W3C 第一級的DOM。對他的運作做一個大概的瞭解並且讓你知道你可以對他們做什麼。
首先是對於DOM的一些建議和DOM設計的目的，然後我會告訴你什麼是節點（nodes）並且怎樣通過DOM樹來遍曆節點。接著是如何得到一個特定的節點，以及怎樣改變他的值和屬性。最後就是DOM的終極目標：怎麼建立一個自己的新節點。
建議
Level 1DOM是W3C制定的用來提供給任何程式語言來訪問XML文檔的。不管你用什麼語言程式來處理XML文檔，只要是Level 1DOM裡面的方法和屬性就可以。不管是Perl、VBScript還是JavaScript你都可以讀取任何你想讀取的值並且修改他們。
你們可能會猜到，這段描述的是一種理想情況，差異還是存在的（比如瀏覽器）。然後這部分內容還是比較少，並且你在JavaScript裡學習如何處理XML也對你在其它語言中的學習會有一定的協助。
從某種程度上也可以講HTML看做是一種XML文檔。只要瀏覽器能夠處理相應的指令碼，那麼Level 1 DOM也同樣在HTML裡面可以啟動並執行很好。
你可以讀取每一個HTML的標籤的文本和屬性，你可以刪除每一個標籤和他們的內容，你還可以即時的在現有的文檔裡面插入一個新的標籤而不用在伺服器上修改。
因為設計之初要考慮到修改XML的方方面面，所以對於一般的網頁工程師來說有一些方法可能永遠也用不上。比如，你可以用它來修改HTML的注釋，但是我沒有看出來問什麼要這樣做。同樣的還有一些DOM處理DTD/Doctype的內容，你在你的網頁設計中並不需要，所以忽略掉，集中注意力在你的日常所需上就好。
節點（Nodes）
文件物件模型是一種文檔內的多個元素之間怎樣相互聯絡的一種模型。在Level 1 DOM中，每一個對象都是一個節點。所以如果你寫：
<p>This is a paragraph</p>
那麼你就建立了兩個節點：元素P和內容是"This is a paragraph”的文本節點。這個文本節點包含在P元素內，所以可以認為是p節點的子節點。反過來說，p元素就是文本節點的父節點。
如果你寫成：
<p>This is a <B>Paragraph</B></p>
那麼元素節點p就有兩個子節點，其中一個還有他自己的子節點。
最後就是參數節點。（令人困惑的是，他們不算做元素節點的子節點。事實上，在我寫這一章的過程中我做過一些測試，IE5根本就不把參數節點當做元素的子節點。）所以：
<P ALIGN="right">This is a <B>paragraph</B></P>的結構可能是這樣的：
<P> ----------------
| |
-------------- ALIGN
| | |
This is a <B> |
| right
|
paragraph這就是元素節點，文本節點和參數節點。99%的HTML頁面都是由他們組成，你的主要任務也就是如何放置他們。當然還有很多的其他節點，暫且略過。
就像你所瞭解的，p元素也有他自己的父節點，通常就是document，有時候也可能是一個DIV。所以整個文檔都可以看做是一顆由很多的節點群組成的樹，而且這些節點大多都有自己的子節點。
<BODY>
|
|-------------------------------------
| |
<P> ---------------- lots more nodes
| |
-------------- ALIGN
| | |
This is a <B> |
| right
|
paragraph遍曆DOM樹
知道了DOM樹的結構，你就可以遍曆他來找到你想要的元素。舉個例子，假設元素節點p已經儲存在變數x中（等一會介紹這是怎麼做到的）。這時候如果我們想訪問BODY那麼：
x.parentNode
我們就得到了x的父元素，然後就可以修改它了。這樣可以到達B節點：
x.childNode[1]
childNode是一個包含所有x的子節點的數組。當然，數組是從0開始編號的，所以childNode[0]就是文本節點"This is a " childNode[1]就是B節點。
兩個特別的：x.firstChild就表示x的第一個子節點；x.lastChild就表示x的最後一個子節點。
假設p是BODY的第一個子節點，BODY又是document的第一個子節點，所以為了到達B節點，你可以用下面的任意方法：
document.firstChild.firstChild.lastChild;
document.firstChild.childNodes[0].lastChild;
document.firstChild.childNodes[0].childNodes[1];
etc.甚至是下面這個比較笨的：
document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];得到一個元素
然而，這樣遍曆文檔實在是太麻煩了。因為Level 1 DOM設計的目標就是允許你修改整個DOM樹，所以你必須準確的知道DOM樹的結構，這會很快導致一些問題。
所以還有一些方法能夠很快的到達你想要的元素。只要你到達了這裡，就可以遍曆整個DOM樹的每一個節點。
讓我們繼續前面的例子。你想要到達元素B。最簡單的辦法就是直接跳過去。通過document.getElementByTagName你就能很快的建立一個包含文檔內的所有B標籤的數組。假設我們的B是第一個，那麼你就可以簡單的寫：
var x = document.getElementsByTagName('B')[0]x就包含了元素節點B。首先你命令瀏覽器得到整個文檔的所有元素B(document.getElementByTagName(‘B’)) ,然後你選擇了第一個文檔的第一個元素B([0])，就得到了你想要的。
你也可以寫：
var x = document.getElementsByTagName('P')[0].lastChild;現在你先到了文檔的第一個段落P（假設我們的P是第一個元素），然後到達p的最後一個子項目。
最好的能準確到達元素並且不需要DOM結構的辦法就是給B一個ID：
<P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>現在你就可以簡單的寫：
var x = document.getElementById('hereweare');元素B就儲存在了x裡。
修改一個節點
現在我們已經到達了節點，就可以做一些修改了。假設我們想把加粗的文字部分修改為'bold bit of text’。我們需要訪問正確的元素然後修改它的nodeValue。現在正確的元素不是元素B而是他的子項目text node：我們想改變的是文字，不是元素。所以可以寫：
document.getElementById('hereweare').firstChild.nodeValue='bold bit of text';元素就改變了。
你可以通過nodeValue來修改任何文本節點或者參數。比如你可以修改段落的ALIGN參數。這也是非常的簡單，先找到需要的元素（在這個例子中是B元素的父元素），然後使用setAttribute()方法來設定你想要的值：
function test2(val) {
if (document.getElementById && document.createElement)
{
node = document.getElementById('hereweare').parentNode;
node.setAttribute('align',val);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}建立和刪除元素
修改元素固然有用，但是還是不如建立你需要的元素然後插入到現有的文檔中。我可以很簡單的在這個段落後面添加一個HR元素然後很簡單的刪除它。
建立元素使用下面的方法:
var x=document.createElemnt(‘HR’)
這樣HR就建立並且儲存在x中。第二步就是把x插入到文檔之中。我寫了一個ID是inserthere的SPAN，我們就把它插入到這。所以我們使用appendChild()方法：
document.getElementById('inserthrhere').appendChild(x);刪除它稍稍有點麻煩。我先建立一個臨時變數node來儲存SPAN，然後我告訴他移除他的第一個子項目：
var node=document.getElementById(‘inserthere’);
node.removeChild(node.childNode[0]);
同樣的方法我們也可以建立一個新的元素然後添加在ID是hereweare的B元素上。var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);你可以試一試，你會注意到用老的辦法可能不會移除新加的文本，那是因為他們已經成為分離的兩部分了：
<B>
|
------------
| |
paragraph A new text node
has been appended!
(可以通過normalize()來把他們合并，但是IE5不支援）
我不打算告訴你怎麼移除它，自己練習會比較有收穫
翻譯地址：http://www.quirksmode.org/dom/intro.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
