html dom與xml dom關系:

什么是 DOM？

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

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

“W3C 文檔對象模型 (DOM) 是中立于平臺和語言的接口，它同意程序和腳本動態地訪問和更新文檔的內容、結構和樣式。”

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

核心 DOM - 針對不論什么結構化文檔的標準模型

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

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

DOM 是 Document Object Model(文檔對象模型)的縮寫。

什么是 XML DOM？

XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。

什么是 HTML DOM？

HTML DOM 是：

HTML 的標準對象模型

HTML 的標準編程接口

W3C 標準

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

換言之。HTML DOM 是關于怎樣獲取、改動、加入或刪除 HTML 元素的標準。

HTML DOM 節點樹

HTML DOM 將 HTML 文檔視作樹結構。這樣的結構被稱為節點樹：

注意：假設是像一些段落格式標簽，比方div，p，這些標簽想要設置里面的內容則須要內嵌標簽。由于這些標簽沒有文本節點，僅僅能使用innerHTML設置內部標簽。

通過 HTML DOM，樹中的全部節點均可通過 JavaScript 進行訪問。全部 HTML 元素(節點)均可被改動，也能夠創建或刪除節點。

DOM 節點

依據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點：

整個文檔是一個文檔節點

每一個 HTML 元素是元素節點

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

每一個 HTML 屬性是屬性節點

凝視是凝視節點

節點父、子和同胞

節點樹中的節點彼此擁有層級關系。

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

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

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

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

同胞是擁有同樣父節點的節點

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

HTML DOM 方法

方法是我們能夠在節點(HTML 元素)上運行的動作。

編程接口

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

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

方法是您可以運行的動作(比方加入或改動元素)。

屬性是您可以獲取或設置的值(比方節點的名稱或內容)。

HTML DOM 對象 - 方法和屬性

DOM 屬性

innerHTML 屬性

獲取元素內容的最簡單方法是使用 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 訪問

getElementById() 方法

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

node.getElementById("id");

getElementsByTagName() 方法

getElementsByTagName() 返回帶有指定標簽名的全部元素。

node.getElementsByTagName("tagname");

getElementsByClassName() 方法

假設您希望查找帶有同樣類名的全部 HTML 元素，請使用這種方法：

document.getElementsByClassName("intro");

上面的樣例返回包括 class="intro" 的全部元素的一個列表：

凝視：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中無效。

HTML 事件的樣例：

當用戶點擊鼠標時

當網頁已載入時

當圖片已載入時

當鼠標移動到元素上時

當輸入字段被改變時

當 HTML 表單被提交時

當用戶觸發按鍵時

onload 和 onunload 事件

當用戶進入或離開頁面時，會觸發 onload 和 onunload 事件。

onload 事件可用于檢查訪客的瀏覽器類型和版本號，以便基于這些信息來載入不同版本號的網頁。

onload 和 onunload 事件可用于處理 cookies。

onchange 事件

onchange 事件經常使用于輸入字段的驗證。

以下的樣例展示了怎樣使用 onchange。

當用戶改變輸入字段的內容時。將調用 upperCase() 函數。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠標指針移動到或離開元素時觸發函數。

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠標點擊的所有過程。

首先當某個鼠標button被點擊時。觸發

onmousedown 事件，然后，當鼠標button被松開時，會觸發 onmouseup 事件，最后，當鼠標點擊完畢時，觸發

onclick 事件。

用于處理XML文檔的DOM元素屬性

屬性名

描寫敘述

childNodes

返回當前元素全部子元素的數組

firstChild

返回當前元素的第一個下級子元素

lastChild

返回當前元素的最后一個子元素

nextSibling

返回緊跟在當前元素后面的元素

noedValue

指定表示元素值的讀/寫屬性

parentNode

返回元素的父節點

previousSibling

返回緊鄰當前元素之前的元素

用于遍歷XML文檔的DOM元素方法

屬性名

描寫敘述

getElementById(id)???(document)

獲取有指定唯一ID屬性值文檔中的元素

getElementsByTagName(name)

返回當前元素中指定標記名的子元素的數組

hasChildNodes()

返回一個布爾值，指示元素是否有子元素

getAttribute(name)

返回元素的屬性值，屬性由name指定

動態創建內容時所用的W3C DOM屬性和方法

屬性/方法

描寫敘述

document.createElement(tagName)

文檔對象上的createElement方法能夠創建由tagName指定的元素，假設以串div作為方法參數，就會生成一個div元素

document.createTextNode(text)

文檔對象的createTextNode方法會創建一個包括靜態文本的節點

.appendChild(childNode)

appendChild方法將指定的節點添加到當前元素的子節點列表(作為一個新的子節點)。比如。能夠添加一個option元素。作為select元素的子節點

.getAttriture(name)

這些方法分別獲得和設置元素中name屬性的值

..setAttritube(name,value)

.insertBefore(newNode,targetNode)

這種方法將節點newNode作為當前元素的子節點插到targetNode元素前面

.removeAttribute(name)

這種方法從元素中刪除屬性name

.removeChild(childNode)

這種方法從元素中刪除子元素childNode

.replaceChild(newNode,oldNode)

這種方法將節點oldNode替換為節點newNode

.hasChildnodes()

這種方法返回一個布爾值。指定元素是否有子元素

dom中全部的對象的屬性及方法請參考w3cschool

Browser 對象參考手冊

點擊下面鏈接。能夠獲得下面對象的很多其它信息。包括它們的集合、屬性、方法以及事件。

當中包括大量實例！

對象

描寫敘述

JavaScript 層級中的頂層對象，表示瀏覽器窗體。

包括client瀏覽器的信息。

包括client顯示屏的信息。

包括了瀏覽器窗體訪問過的 URL。

包括了當前 URL 的信息。

HTML DOM 對象參考手冊

請點擊以下的鏈接，學習很多其它有關對象及其集合、屬性、方法和事件的知識。

當中包括大量實例！

對象

描寫敘述

代表整個 HTML 文檔。可被用來訪問頁面中的全部元素

代表 元素

代表圖像映射中的 元素

代表 元素

代表

元素

代表 元素

代表某個事件的狀態

代表

元素

代表 元素

代表

元素

代表 元素

代表 元素

代表 HTML 表單中的一個button

代表 HTML 表單中的復選框

代表 HTML 表單中的文件上傳

代表 HTML 表單中的隱藏域

代表 HTML 表單中的password域

代表 HTML 表單中的單選button

代表 HTML 表單中的重置button

代表 HTML 表單中的確認button

代表 HTML 表單中的文本輸入域(文本框)

代表 元素

代表 元素

代表 元素

代表 元素

代表 HTML 表單中的選擇列表

代表單獨的樣式聲明

代表

代表

元素

代表

元素

代表 元素

總結

以上是生活随笔為你收集整理的html用dom显示xml,dom 编程(html和xml)的全部內容，希望文章能夠幫你解決所遇到的問題。

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