來源：HTML DOM 教程

0、什么是 HTML DOM？

HTML DOM 是HTML Document Object Model(文檔對(duì)象模型)的縮寫，它將網(wǎng)頁中的各個(gè)元素都看作一個(gè)個(gè)對(duì)象，從而使網(wǎng)頁中的元素也可以被計(jì)算機(jī)語言獲取或者編輯，也就是：

• HTML 的標(biāo)準(zhǔn)對(duì)象模型
• HTML 的標(biāo)準(zhǔn)編程接口（所有HTML元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性）
• W3C 標(biāo)準(zhǔn)

HTML DOM 定義了所有 HTML 元素的對(duì)象和屬性，以及訪問它們的方法。

換言之，HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。

1、DOM 節(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)

2、HTML DOM 方法

方法是我們可以在節(jié)點(diǎn)上執(zhí)行的動(dòng)作（比如添加或修改元素）。

這里提供一些您將在本教程中學(xué)到的常用方法：

方法描述

getElementById()	返回帶有指定 ID 的元素。
getElementsByTagName()	返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）。
getElementsByClassName()	返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表。
appendChild()	把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)。
removeChild()	刪除子節(jié)點(diǎn)。
replaceChild()	替換子節(jié)點(diǎn)。
insertBefore()	在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)。
createAttribute()	創(chuàng)建屬性節(jié)點(diǎn)。
createElement()	創(chuàng)建元素節(jié)點(diǎn)。
createTextNode()	創(chuàng)建文本節(jié)點(diǎn)。
getAttribute()	返回指定的屬性值。
setAttribute()	把指定屬性設(shè)置或修改為指定的值。

3、HTML DOM 屬性

屬性是節(jié)點(diǎn)能夠被獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。

3、1 innerHTML 屬性

用來獲取或設(shè)置位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的HTML。

有兩種寫法:（1）document.getElementById(id).innerHTML=.......(2)id.innerHTML=.......

3、2 nodeName 屬性

nodeName 屬性規(guī)定節(jié)點(diǎn)的名稱。

• nodeName 是只讀的
• 元素節(jié)點(diǎn)的 nodeName 與 標(biāo)簽名相同
• 屬性節(jié)點(diǎn)的 nodeName 與 屬性名相同
• 文本節(jié)點(diǎn)的 nodeName 始終是 #text
• 文檔節(jié)點(diǎn)的 nodeName 始終是 #document

3、3 nodeValue 屬性

nodeValue 屬性規(guī)定節(jié)點(diǎn)的值。

• 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
• 文本節(jié)點(diǎn)的 nodeValue 是文本本身
• 屬性節(jié)點(diǎn)的 nodeValue 是屬性值

?

3、4 nodeType 屬性

nodeType 屬性返回節(jié)點(diǎn)的類型。nodeType 是只讀的。

比較重要的節(jié)點(diǎn)類型有：

元素類型NodeType

元素	1
屬性	2
文本	3
注釋	8
文檔	9

4、HTML DOM 訪問

訪問 HTML 元素等同于訪問節(jié)點(diǎn)，有以下幾種方式：

• 通過使用 getElementById() 方法
• 通過使用 getElementsByTagName() 方法，如document.getElementsByTagName("p");
• 通過使用 getElementsByClassName() 方法，如document.getElementsByClassName("intro");（其中class="intro"，在IE5，6，7，8中無效）

5、HTML DOM - 修改

修改 HTML = 改變?cè)亍傩浴邮胶褪录Ｖ饕幸韵聨讉€(gè)不同的方面：

（1）、改變 HTML 內(nèi)容——innerHTML（元素節(jié)點(diǎn)） 屬性或?nodeValue?（有內(nèi)容的文本節(jié)點(diǎn)才能使用）屬性

（2）、改變 CSS 樣式——如document.getElementById("p2").style.color="blue";

（3）、改變 HTML 屬性——如document.getElementById("image").src（屬性名）="landscape.jpg";

（4）、創(chuàng)建新的 HTML 元素

　　　?首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上，有以下三種方法：

?

（5）、刪除已有的 HTML 元素

　　使用removeChild（）方法

<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script>
（1）引用父元素 var parent=document.getElementById("div1"); //查找要?jiǎng)h除元素的父元素 var child=document.getElementById("p1"); //查找要?jiǎng)h除的元素 parent.removeChild(child); //從父元素中刪除子元素
（2）不引用父元素
var child=document.getElementById("p1"); //查找需要?jiǎng)h除的元素 child.parentNode.removeChild(child); //使用parentNode屬性來查找父元素從而刪除元素

</script>

（6）替換HTML元素

　　使用 replaceChild() 方法。

　　如 parent.replaceChild(para,child); 將child替換成para元素

（6）、改變事件（處理程序）

轉(zhuǎn)載于:https://www.cnblogs.com/cjlalala/p/5804349.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的12、HTML DOM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。