一．什么是DOM
HTML文檔對(duì)象模型（HTML Document Object Model）定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。HTML DOM 把HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。
在1998年，W3C發(fā)布了第一級(jí)的DOM規(guī)范。這個(gè)規(guī)范允許訪問和操作HTML頁面中的每一個(gè)單獨(dú)的元素。所有的瀏覽器都執(zhí)行了這個(gè)標(biāo)準(zhǔn)，因此，DOM的兼容性問題也幾乎難覓蹤影了。
DOM可被JavaScript用來讀取、改變HTML、XHTML以及XML文檔。被分為不同的部分（核心、XML及HTML）和級(jí)別（DOM Level 1/2/3）：
Core DOM
定義了一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)象
XML DOM
定義了一套標(biāo)準(zhǔn)的針對(duì)XML文檔的對(duì)象
HTML DOM
定義了一套標(biāo)準(zhǔn)的針對(duì)HTML文檔的對(duì)象。
二．文檔樹(節(jié)點(diǎn)樹)
如下HTML文檔：
- <html>
- <head>
- <title>DOM Tutorial</title>
- </head>
- <body>
- <h1>DOM Lesson one</h1>
- <p>Hello world!</p>
- </body>
- </html>
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
1)除文檔節(jié)點(diǎn)之外的每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。
2)大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)。
3)當(dāng)節(jié)點(diǎn)分享同一個(gè)父節(jié)點(diǎn)時(shí)，它們就是同輩（同級(jí)節(jié)點(diǎn)）
4)節(jié)點(diǎn)也可以擁有后代，后代指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)
5)節(jié)點(diǎn)也可以擁有先輩。先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)
三．節(jié)點(diǎn)信息
每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。這些屬性是：
nodeName（節(jié)點(diǎn)名稱） ,nodeValue（節(jié)點(diǎn)值）, nodeType（節(jié)點(diǎn)類型）
1.nodeName
nodeName屬性含有某個(gè)節(jié)點(diǎn)的名稱。
元素節(jié)點(diǎn)的nodeName是標(biāo)簽名稱
屬性節(jié)點(diǎn)的nodeName是屬性名稱
文本節(jié)點(diǎn)的nodeName永遠(yuǎn)是#text
文檔節(jié)點(diǎn)的nodeName永遠(yuǎn)是#document
注釋：nodeName所包含的XML元素的標(biāo)簽名稱永遠(yuǎn)是大寫的
2.nodeValue
對(duì)于文本節(jié)點(diǎn)，nodeValue屬性包含文本。
對(duì)于屬性節(jié)點(diǎn)，nodeValue屬性包含屬性值。
nodeValue屬性對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的。
3.nodeType
nodeType屬性可返回節(jié)點(diǎn)的類型。
最重要的節(jié)點(diǎn)類型是：
元素類型 節(jié)點(diǎn)類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
四．查找節(jié)點(diǎn)
1．通過使用 getElementById() 和getElementsByName()和 getElementsByTagName() 方法
2.通過使用一個(gè)元素節(jié)點(diǎn)的childNodes,parentNode、firstChild以及l(fā)astChild屬性
根節(jié)點(diǎn)
有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn)：
document.documentElement 可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)
document.body 對(duì)HTML頁面的特殊擴(kuò)展，提供了對(duì)<body>標(biāo)簽的直接訪問
posted on 2008-11-24 23:58
Vincent-chen 閱讀(310)
評(píng)論(0) 編輯 收藏 所屬分類:
JavaScript