來源：HTML DOM 教程

0、什么是 HTML DOM？

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

• HTML 的標準對象模型
• HTML 的標準編程接口（所有HTML元素被定義為對象，而編程接口則是對象方法和對象屬性）
• W3C 標準

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

換言之，HTML DOM 是關于如何獲取、修改、添加或刪除 HTML 元素的標準。

1、DOM 節點

根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：

• 整個文檔是一個 文檔節點
• 每個 HTML 元素是 元素節點
• HTML 元素內的文本是 文本節點
• 每個 HTML 屬性是 屬性節點
• 注釋是 注釋節點

2、HTML DOM 方法

方法是我們可以在節點上執行的動作（比如添加或修改元素）。

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

方法描述

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

3、HTML DOM 屬性

屬性是節點能夠被獲取或設置的值（比如節點的名稱或內容）。

3、1 innerHTML 屬性

用來獲取或設置位于對象起始和結束標簽內的HTML。

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

3、2 nodeName 屬性

nodeName 屬性規定節點的名稱。

• nodeName 是只讀的
• 元素節點的 nodeName 與 標簽名相同
• 屬性節點的 nodeName 與 屬性名相同
• 文本節點的 nodeName 始終是 #text
• 文檔節點的 nodeName 始終是 #document

3、3 nodeValue 屬性

nodeValue 屬性規定節點的值。

• 元素節點的 nodeValue 是 undefined 或 null
• 文本節點的 nodeValue 是文本本身
• 屬性節點的 nodeValue 是屬性值

?

3、4 nodeType 屬性

nodeType 屬性返回節點的類型。nodeType 是只讀的。

比較重要的節點類型有：

元素類型NodeType

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

4、HTML DOM 訪問

訪問 HTML 元素等同于訪問節點，有以下幾種方式：

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

5、HTML DOM - 修改

修改 HTML = 改變元素、屬性、樣式和事件。主要有以下幾個不同的方面：

（1）、改變 HTML 內容——innerHTML（元素節點） 屬性或?nodeValue?（有內容的文本節點才能使用）屬性

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

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

（4）、創建新的 HTML 元素

　　　?首先創建該元素（元素節點），然后把它追加到已有的元素上，有以下三種方法：

?

（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"); //查找要刪除元素的父元素 var child=document.getElementById("p1"); //查找要刪除的元素 parent.removeChild(child); //從父元素中刪除子元素
（2）不引用父元素
var child=document.getElementById("p1"); //查找需要刪除的元素 child.parentNode.removeChild(child); //使用parentNode屬性來查找父元素從而刪除元素

</script>

（6）替換HTML元素

　　使用 replaceChild() 方法。

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

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

轉載于:https://www.cnblogs.com/cjlalala/p/5804349.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。