然冬 ·什么是 DOM
文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對該結(jié)構(gòu)進行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。DOM 將文檔解析為一個由節(jié)點和對象（包含屬性和方法的對象）組成的結(jié)構(gòu)集合。簡言之，它會將web頁面和腳本或程序語言連接起來。(MDN)
DOM (Document Object Model，文檔對象模型) 是 W3C 制定的訪問、操作 HTML 和XML的標準。
1. 理解 DOM
對于前端開發(fā)者，主要需要關(guān)心操作 HTML 的部分，即 HTML DOM 標準。
DOM 標準定義了如何去增加、刪除、查詢、修改HTML的元素。
實際上 HTML 只是一個帶有格式的文本，經(jīng)過瀏覽器解析后，會變成一顆樹（因為 HTML 也是樹形的），通常會叫他 DOM樹 ，根節(jié)點叫 文檔節(jié)點(document) ，樹上的每個節(jié)點就叫 DOM節(jié)點 。
DOM 標準提供了一系列方法對這些節(jié)點進行操作。
DOM 節(jié)點是契合HTML標準的，可以對其細分：
- 整個文檔是一個文檔節(jié)點
- HTML 元素內(nèi)的文本是文本節(jié)點
- 每個 HTML 元素是元素節(jié)點
- 每個 HTML 屬性是屬性節(jié)點
- 注釋為注釋節(jié)點
如果沒有 DOM ，JavaScript 也就在網(wǎng)頁開發(fā)中就失去了活力。
2. 操作 DOM
通常前端開發(fā)者指的操作 DOM ，就是操作 DOM 節(jié)點。
如有以下結(jié)構(gòu)的 HTML：
<div>
<p>我是一段文本</p>
<a id="link" href="//imooc.com">我是一個超鏈接</a>
<div>
經(jīng)過瀏覽器后，上面三個元素就都是 DOM 節(jié)點了。
這時候想修改 a 標簽里的文案，就需要操作 DOM 節(jié)點來修改。
通過 getElementById 方法就可以根據(jù) id 獲取到一個 DOM 節(jié)點，所有 DOM 節(jié)點都具有這個方法。
在不知道某個元素的父級對象的時候，就可以使用 document.getElementById 來獲取，意思是在 document 下根據(jù) id 查找一個 DOM 節(jié)點。
<div>
<p>我是一段文本</p>
<a id="link" href="//imooc.com">我是一個超鏈接</a>
<div>
<script>
var aEle = document.getElementById('link');
aEle.innerText = '前往慕課網(wǎng)';
</script>
通過修改dom節(jié)點的innerText屬性就可以改掉文案。
實際上這一段文案，就是一個文本節(jié)點。
其實具有id屬性的dom節(jié)點不需要獲取，也可以直接通過JavaScript訪問，如id為container的元素，就可以直接在JavaScript中使用container訪問。
因為具有id的節(jié)點會以id為屬性名，作為window的屬性存在，值就是這個DOM節(jié)點。
但通常不建議這么做，因為他人閱讀代碼的時候可能會找不到聲明的地方，二是名字被固定了。
3. 小結(jié)
DOM 是一套標準，其定義了怎么操作 HTML 元素，瀏覽器則根據(jù) DOM 標準實現(xiàn)了一系列的接口提供給前端開發(fā)者用 JavaScript 調(diào)用。
DOM 提供了前端開發(fā)者與頁面元素交互的能力，如果失去了 DOM 接口，JavaScirpt 就無法參與網(wǎng)頁的編寫了。
2025 imooc.com All Rights Reserved |