經過近一個星期,總算把w3chool上的HTML DOM的實例差不多看了一遍,因為本身對其中的很多都用過,所以看起來也很快,現在就再系統的回顧下HTML DOM的一些概念和基礎的東西,大部分都是從w3school上看到的

什么是DOM

DOM是w3c(萬維網聯盟)的標準

DOM定義了訪問HTML和XML的標準

"W3C文檔對象模型(DOM)是中立于語言和平臺的接口,它允許程序和腳本動態的訪問和更新文檔的結構,內容和樣式"

W3C DOM 標準被分為 3 個不同的部分：

● 核心DOM? - 針對任何結構化文檔的標準模型

● XML DOM? - 針對XML文檔的標準模型

● HTML DOM - 針對HTML文檔的標準模型

ps:DOM是 Document Object Model (文本對象模型)的縮寫

什么是XML DOM

XML DOM定義了所有xml元素的對象和屬性以及訪問他們的方法

如果你想學習XML DOM 可以訪問 http://www.w3school.com.cn/xmldom/index.asp

什么是HTML DOM

HTML DOM:

● HTML的標準對象模型

● HTML的標準編程接口

● W3C標準

HTML DOM 定義了所有HTML元素的對象和屬性以及訪問他們的方法,換句話說,HTML DOM是關于如果獲取,刪除,修改HTML元素的標準

下面就是針對HTML DOM的一些方法屬性的介紹

HTML DOM節點

在HTML DOM中,所有事物都是節點,DOM被視為節點樹的HTML

DOM節點

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

● 整個文檔是一個文檔節點

● 每個 HTML 元素是元素節點

● HTML 元素內的文本是文本節點

● 每個 HTML 屬性是屬性節點

● 注釋是注釋節點

HTML DOM節點樹

根據HTML DOM標準,樹中的所有節點都可以通過javascript進行訪問,所有HTML 元素(節點)均能被修改 也可以 刪除 和 新增新的節點

節點父子和同胞

下面的圖片展示了節點樹的一部分，以及節點之間的關系：

父(parent)、子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞(兄弟或姐妹)。

● 在節點樹中，頂端節點被稱為根(root)

● 每個節點都有父節點、除了根(它沒有父節點)

● 一個節點可擁有任意數量的子

● 同胞是擁有相同父節點的節點

請看下面的 HTML 片段：

DOM 教程

DOM 第一課

Hello world!

從上面的 HTML 中：

●? 節點沒有父節點；它是根節點

●

和 的父節點是 節點

●? 文本節點 "Hello world!" 的父節點是

節點

并且：

●? 節點擁有兩個子節點：

和

●?

節點擁有一個子節點： 節點

●?

節點也擁有一個子節點：文本節點 "DOM 教程"

●?

和

節點是同胞節點，同時也是

的子節點

并且：

●?

元素是 元素的首個子節點

●?

元素是 元素的最后一個子節點

●?

元素是 元素的首個子節點

●?

元素是

元素的最后一個子節點

注意:

DOM 處理中的常見錯誤是希望元素節點包含文本。

在本例中：

DOM 教程，元素節點 ，包含值為 "DOM 教程" 的文本節點。

可通過節點的 innerHTML 屬性來訪問文本節點的值。

HTML DOM 方法

方法即是我們可以在節點(HTML 元素)上執行的動作。

[b]編程接口[/b]

可通過 JavaScript (以及其他編程語言)對 HTML DOM 進行訪問。

所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。

方法是您能夠執行的動作(比如添加或修改元素)。

屬性是您能夠獲取或設置的值(比如節點的名稱或內容)。

getElementById() 方法返回帶有指定 ID 的元素：

例: var element=document.getElementById("intro");

HTML DOM 對象 - 方法和屬性

一些常用的 HTML DOM 方法：

●? getElementById(id) - 獲取帶有指定 id 的節點(元素)

●? appendChild(node) - 插入新的子節點(元素)

●? removeChild(node) - 刪除子節點(元素)

一些常用的 HTML DOM 屬性：

●? innerHTML - 節點(元素)的文本值

●? parentNode - 節點(元素)的父節點

●? childNodes - 節點(元素)的子節點

●? attributes - 節點(元素)的屬性節點

下面也是一些常用方法:

下面是一些屬性介紹:

innerHTML 屬性

獲取元素內容的最簡單方法是使用 innerHTML 屬性。

innerHTML 屬性對于獲取或替換 HTML 元素的內容很有用。

實例:

Hello World!

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

在上面的例子中，getElementById 是一個方法，而 innerHTML 是屬性。

innerHTML 屬性可用于獲取或改變任意 HTML 元素，包括 和

。

nodeName 屬性

nodeName 屬性規定節點的名稱。

● nodeName 是只讀的

● 元素節點的 nodeName 與標簽名相同

● 屬性節點的 nodeName 與屬性名相同

● 文本節點的 nodeName 始終是 #text

● 文檔節點的 nodeName 始終是 #document

注釋：nodeName 始終包含 HTML 元素的大寫字母標簽名。

nodeValue 屬性

nodeValue 屬性規定節點的值。

● 元素節點的 nodeValue 是 undefined 或 null

● 文本節點的 nodeValue 是文本本身

● 屬性節點的 nodeValue 是屬性值

nodeType 屬性

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

比較重要的節點類型有：

元素類型 NodeType

元素 1

屬性 2

文本 3

注釋 8

文檔 9

總結

以上是生活随笔為你收集整理的html dom概念,js学习之HTML DOM的一些基础概念的全部內容，希望文章能夠幫你解決所遇到的問題。

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