這個是不是跟XML的結(jié)構(gòu)有點相似呢。不同的是,HTML文檔的樹形主要包含表示元素、標(biāo)記的節(jié)點和表示文本串的節(jié)點。
DOM樹的根節(jié)點是個Document對象,該對象的documentElement屬性引用表示文檔根元素的Element對象(對于HTML文檔,這個就是<html>標(biāo)記)。Javascript操作HTML文檔的時候,document即指向整個文檔,<body>、<table>等節(jié)點類型即為Element。Comment類型的節(jié)點則是指文檔的注釋。具體節(jié)點類型的含義,請參考《Javascript權(quán)威指南》,在此不贅述。
Document定義的方法大多數(shù)是生產(chǎn)型方法,主要用于創(chuàng)建可以插入文檔中的各種類型的節(jié)點。常用的Document方法有:
對于Element節(jié)點,可以通過調(diào)用getAttribute()、setAttribute()、removeAttribute()方法來查詢、設(shè)置或者刪除一個Element節(jié)點的性質(zhì),比如<table>標(biāo)記的border屬性。下面列出Element常用的屬性:
Element常用的方法:
Attr對象代表文檔元素的屬性,有name、value等屬性,可以通過Node接口的attributes屬性或者調(diào)用Element接口的getAttributeNode()方法來獲取。不過,在大多數(shù)情況下,使用Element元素屬性的最簡單方法是getAttribute()和setAttribute()兩個方法,而不是Attr對象。
需要指出的是,childNodes[]的值實際上是一個NodeList對象。因此,可以通過遍歷childNodes[]數(shù)組的每個元素,來枚舉一個給定節(jié)點的所有子節(jié)點;通過遞歸,可以枚舉樹中的所有節(jié)點。下表列出了Node對象的一些常用屬性和方法:
Node對象常用屬性:
Node對象常用方法:
接下來,讓我們使用上述的DOM應(yīng)用編程接口,來試著操作HTML文檔。