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