在《HTML DOM中文參考手冊(cè)》中，HTML DOM 定義了存取和操作 HTML 文件的標(biāo)準(zhǔn)方法。 DOM 以樹狀結(jié)構(gòu)表達(dá) HTML 文件。

HTML?DOM是HTML Document Object Model(文檔物件模型)的縮寫，HTML DOM則是專門適用於HTML/XHTML的文檔物件模型。熟悉軟體開發(fā)的人員可以將HTML DOM理解為網(wǎng)頁的API。它將網(wǎng)頁中的各個(gè)元素都看作一個(gè)個(gè)對(duì)象，從而使網(wǎng)頁中的元素也可以被電腦語言取得或編輯。例如Javascript就可以利用HTML DOM動(dòng)態(tài)地修改網(wǎng)頁。

DOM是Document Object Model文檔物件模型的縮寫。根據(jù)W3C DOM規(guī)範(fàn)，DOM是一種與瀏覽器，平臺(tái)，語言無關(guān)的接口，使得你可以訪問頁面中其他的標(biāo)準(zhǔn)組件。簡(jiǎn)單理解，DOM解決了Netscape的JavaScript和 Microsoft的JavaScript之間的衝突，給予web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來存取他們網(wǎng)站中的資料、腳本和表現(xiàn)層物件。

DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或資訊片段的集合。這個(gè)層次結(jié)構(gòu)允許開發(fā)人員在樹中導(dǎo)航尋找特定資訊。分析該結(jié)構(gòu)通常需要載入整個(gè)文件和建構(gòu)層次結(jié)構(gòu)，然後才能做任何工作。由於它是基於資訊層次的，因而 DOM 被認(rèn)為是基於樹或基於物件的。

HTML DOM 定義了存取和操作HTML文件的標(biāo)準(zhǔn)方法。

HTML DOM 把 HTML 文件呈現(xiàn)為帶有元素、屬性和文字的樹狀結(jié)構(gòu)（節(jié)點(diǎn)樹）。

提示：在您繼續(xù)學(xué)習(xí)HTML DOM之前，您需要先對(duì)HTML、CSS、JavaScrip內(nèi)容擁有基本的了解。

節(jié)點(diǎn)資訊

在 HTML DOM 中，所有事物都是節(jié)點(diǎn)。 DOM 是被視為節(jié)點(diǎn)樹的 HTML。

每個(gè)節(jié)點(diǎn)都擁有包含關(guān)於節(jié)點(diǎn)某些資訊的屬性。這些屬性是：

nodeName（節(jié)點(diǎn)名稱）nodeValue（節(jié)點(diǎn)值）nodeType（節(jié)點(diǎn)類型）

根據(jù)W3C的HTML DOM 標(biāo)準(zhǔn)，HTML 文件中的所有內(nèi)容都是節(jié)點(diǎn)：?

• 整個(gè)文件是一個(gè)文件節(jié)點(diǎn)

• 每個(gè)HTML 元素是元素節(jié)點(diǎn)

• HTML 元素內(nèi)的文字是文字節(jié)點(diǎn)

• 每個(gè)HTML 屬性是屬性節(jié)點(diǎn)

• 註解是註解節(jié)點(diǎn)

提示：我們的HTML DOM?教學(xué)將幫助您逐步學(xué)習(xí)HTML DOM，如果你有任何疑問，請(qǐng)前往PHP中文網(wǎng)HTML DOM社群提出你的問題，會(huì)有熱心網(wǎng)友為你解答。

HTML DOM 方法

方法是我們可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動(dòng)作。?

• 程式介面

可透過 JavaScript （以及其他程式語言）對(duì) HTML DOM 進(jìn)行存取。

所有 HTML 元素被定義為對(duì)象，而程式設(shè)計(jì)介面則是對(duì)象方法和對(duì)象屬性。

方法是您能夠執(zhí)行的動(dòng)作（例如新增或修改元素）。

屬性是您能夠取得或設(shè)定的值（例如節(jié)點(diǎn)的名稱或內(nèi)容）。

• HTML DOM 物件- 方法與屬性

#一些常用的HTML DOM 方法：

• getElementById(id) - 取得指定id 的節(jié)點(diǎn)（元素）

• appendChild(node) - 插入新的子節(jié)點(diǎn)（元素）

• #removeChild(node) - 刪除子節(jié)點(diǎn)（元素）

一些常用的HTML DOM 屬性：

• innerHTML - 節(jié)點(diǎn)（元素）的文字值

• parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)

• childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn)

• #attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)

#本HTML DOM教學(xué)手冊(cè)涵蓋的內(nèi)容

本HTML DOM教學(xué)手冊(cè)涵蓋所有HTML DOM基礎(chǔ)知識(shí)，包含DOM節(jié)點(diǎn)、DOM方法、DOM屬性、DOM存取、DOM元素、DOM事件等等知識(shí)。

提示：本教學(xué)的每一章都包含了許多HTML DOM實(shí)例，您可以直接點(diǎn)擊?"執(zhí)行實(shí)例"?按鈕線上查看結(jié)果。這些範(fàn)例將幫助您更好地理解學(xué)習(xí)HTML DOM。

其它HTML DOM相關(guān)學(xué)習(xí)參考資源

除了本頁右側(cè)的知識(shí)拓展，也為大家精選了以下資源

• PHP中文網(wǎng)獨(dú)孤九賤系列HTML5影片教學(xué)

• #HTML每日程式設(shè)計(jì)小知識(shí)

• #前端學(xué)習(xí)路線：如何成為優(yōu)秀的前端開發(fā)人員！