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