溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
HTML DOM 定義了訪問(wèn)和操作 HTML 文檔的標(biāo)準(zhǔn)方法。
DOM 以樹(shù)結(jié)構(gòu)表達(dá) HTML 文檔。
::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM 簡(jiǎn)介
。。。。。。。。。
什么是 DOM？
DOM 是 W3C（萬(wàn)維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。
DOM 定義了訪問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)：
"W3C 文檔對(duì)象模型 （DOM） 是中立于平臺(tái)和語(yǔ)言的接口，它允許程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。"
W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分：
核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型
編者注：DOM 是 Document Object Model（文檔對(duì)象模型）的縮寫(xiě)。
http:/ /www.iis7.com/a/lm/gjcpmcx/
。。。。。。。。。。
什么是 XML DOM？
XML DOM 定義了所有 XML 元素的對(duì)象和屬性，以及訪問(wèn)它們的方法。
。。。。。。。。。。
什么是 HTML DOM？
HTML DOM 是：
HTML 的標(biāo)準(zhǔn)對(duì)象模型
HTML 的標(biāo)準(zhǔn)編程接口
W3C 標(biāo)準(zhǔn)
HTML DOM 定義了所有 HTML 元素的對(duì)象和屬性，以及訪問(wèn)它們的方法。
換言之，HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM 節(jié)點(diǎn)
在 HTML DOM 中，所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹(shù)的 HTML。
。。。。。。。。。。
DOM Nodes
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)
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM 方法
HTML DOM 方法是我們可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動(dòng)作。
HTML DOM 屬性是我們可以在節(jié)點(diǎn)（HTML 元素）設(shè)置和修改的值。
。。。。。。。。。。
編程接口
可通過(guò) JavaScript （以及其他編程語(yǔ)言）對(duì) HTML DOM 進(jìn)行訪問(wèn)。
所有 HTML 元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性。
方法是您能夠執(zhí)行的動(dòng)作（比如添加或修改元素）。
屬性是您能夠獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。
。。。。。。。。。。
getElementById() 方法
getElementById() 方法返回帶有指定 ID 的元素
。。。。。。。。。。
HTML DOM 對(duì)象 - 方法和屬性
一些常用的 HTML DOM 方法：
getElementById(id) - 獲取帶有指定 id 的節(jié)點(diǎn)（元素）
appendChild(node) - 插入新的子節(jié)點(diǎn)（元素）
removeChild(node) - 刪除子節(jié)點(diǎn)（元素）
一些常用的 HTML DOM 屬性：
innerHTML - 節(jié)點(diǎn)（元素）的文本值
parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)
childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn)
attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)
。。。。。。。。。。。。
現(xiàn)實(shí)生活中的對(duì)象
某個(gè)人是一個(gè)對(duì)象。
人的方法可能是 eat(), sleep(), work(), play() 等等。
所有人都有這些方法，但會(huì)在不同時(shí)間執(zhí)行它們。
一個(gè)人的屬性包括姓名、身高、體重、年齡、性別等等。
所有人都有這些屬性，但它們的值因人而異。
。。。。。。。。。。。。。
一些 DOM 對(duì)象方法
方法 描述
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è)置或修改為指定的值。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM 屬性
屬性是節(jié)點(diǎn)（HTML 元素）的值，您能夠獲取或設(shè)置。
。。。。。。。。。。。
編程接口
可通過(guò) JavaScript （以及其他編程語(yǔ)言）對(duì) HTML DOM 進(jìn)行訪問(wèn)。
所有 HTML 元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性。
方法是您能夠執(zhí)行的動(dòng)作（比如添加或修改元素）。
屬性是您能夠獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。
。。。。。。。。。。。
innerHTML 屬性
獲取元素內(nèi)容的最簡(jiǎn)單方法是使用 innerHTML 屬性。
innerHTML 屬性對(duì)于獲取或替換 HTML 元素的內(nèi)容很有用。
innerHTML 屬性可用于獲取或改變?nèi)我?HTML 元素，包括 <html> 和 <body>。
。。。。。。。。。。。
nodeValue 屬性
nodeValue 屬性規(guī)定節(jié)點(diǎn)的值。
元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
文本節(jié)點(diǎn)的 nodeValue 是文本本身
屬性節(jié)點(diǎn)的 nodeValue 是屬性值
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
注意： nodeName 始終包含 HTML 元素的大寫(xiě)字母標(biāo)簽名。
。。。。。。。。。。。。
nodeType 屬性
nodeType 屬性返回節(jié)點(diǎn)的類型。nodeType 是只讀的。
比較重要的節(jié)點(diǎn)類型有：
元素類型 NodeType
元素 1
屬性 2
文本 3
注釋 8
文檔 9
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM 訪問(wèn)
訪問(wèn) HTML DOM - 查找 HTML 元素。
。。。。。。。。。。
訪問(wèn) HTML 元素（節(jié)點(diǎn)）
訪問(wèn) HTML 元素等同于訪問(wèn)節(jié)點(diǎn)
您能夠以不同的方式來(lái)訪問(wèn) HTML 元素：
通過(guò)使用 getElementById() 方法
通過(guò)使用 getElementsByTagName() 方法
通過(guò)使用 getElementsByClassName() 方法
。。。。。。。。。。
getElementById() 方法
getElementById() 方法返回帶有指定 ID 的元素引用：
語(yǔ)法：node.getElementById("id")
。。。。。。。。。。
getElementsByTagName() 方法
getElementsByTagName() 返回帶有指定標(biāo)簽名的所有元素。
語(yǔ)法：node.getElementsByTagName("tagname")
。。。。。。。。。。
The getElementsByClassName() Method
如果您希望查找?guī)в邢嗤惷乃?HTML 元素，請(qǐng)使用這個(gè)方法：document.getElementsByClassName("class")
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM - 修改
修改 HTML = 改變?cè)?、屬性、樣式和事件?br/>。。。。。。。。。。
修改 HTML 元素
修改 HTML DOM 意味著許多不同的方面：
改變 HTML 內(nèi)容
改變 CSS 樣式
改變 HTML 屬性
創(chuàng)建新的 HTML 元素
刪除已有的 HTML 元素
改變事件（處理程序）
。。。。。。。。。。
創(chuàng)建 HTML 內(nèi)容，改變?cè)貎?nèi)容的最簡(jiǎn)單的方法是使用 innerHTML 屬性。
改變 HTML 樣式，通過(guò) HTML DOM，您能夠訪問(wèn) HTML 元素的樣式對(duì)象。
創(chuàng)建新的 HTML 元素，如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM - 修改 HTML 內(nèi)容
通過(guò) HTML DOM，JavaScript 能夠訪問(wèn) HTML 文檔中的每個(gè)元素。
。。。。。。。。。。
使用事件
HTML DOM 允許您在事件發(fā)生時(shí)執(zhí)行代碼。
當(dāng) HTML 元素"有事情發(fā)生"時(shí)，瀏覽器就會(huì)生成事件：
在元素上點(diǎn)擊
加載頁(yè)面
改變輸入字段
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM - 元素
添加、刪除和替換 HTML 元素。
。。。。。。。。。。
創(chuàng)建新的 HTML 元素 - createElement()，如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素，然后把它追加到已有的元素上。
創(chuàng)建新的 HTML 元素 - insertBefore()
。。。。。。。。。。
刪除已有的 HTML 元素，如需刪除 HTML 元素，您必須清楚該元素的父元素
。。。。。。。。。。
能否在不引用父元素的情況下刪除某個(gè)元素？
很抱歉。DOM 需要了解您需要?jiǎng)h除的元素，以及它的父元素。
。。。。。。。。。。
替換 HTML 元素，如需替換 HTML DOM 中的元素，請(qǐng)使用 replaceChild() 方法
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM - 事件
HTML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。
。。。。。。。。。。。
對(duì)事件作出反應(yīng)
當(dāng)事件發(fā)生時(shí)，可以執(zhí)行 JavaScript，比如當(dāng)用戶點(diǎn)擊一個(gè) HTML 元素時(shí)。
如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，請(qǐng)把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript
HTML 事件的例子：
當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
當(dāng)網(wǎng)頁(yè)已加載時(shí)
當(dāng)圖片已加載時(shí)
當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
當(dāng)輸入字段被改變時(shí)
當(dāng) HTML 表單被提交時(shí)
當(dāng)用戶觸發(fā)按鍵時(shí)
。。。。。。。。。。。。
HTML 事件屬性
如需向 HTML 元素分配事件，您可以使用事件屬性。
。。。。。。。。。。。
onload 和 onunload 事件
當(dāng)用戶進(jìn)入或離開(kāi)頁(yè)面時(shí)，會(huì)觸發(fā) onload 和 onunload 事件。
onload 事件可用于檢查訪客的瀏覽器類型和版本，以便基于這些信息來(lái)加載不同版本的網(wǎng)頁(yè)。
onload 和 onunload 事件可用于處理 cookies。
。。。。。。。。。。。
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠標(biāo)指針移動(dòng)到或離開(kāi)元素時(shí)觸發(fā)函數(shù)。
。。。。。。。。。。。
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠標(biāo)點(diǎn)擊的全部過(guò)程。首先當(dāng)某個(gè)鼠標(biāo)按鈕被點(diǎn)擊時(shí)，觸發(fā) onmousedown 事件，然后，當(dāng)鼠標(biāo)按鈕被松開(kāi)時(shí)，會(huì)觸發(fā) onmouseup 事件，最后，當(dāng)鼠標(biāo)點(diǎn)擊完成時(shí)，觸發(fā) onclick 事件。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HTML DOM 導(dǎo)航
通過(guò) HTML DOM，您能夠使用節(jié)點(diǎn)關(guān)系在節(jié)點(diǎn)樹(shù)中導(dǎo)航。
。。。。。。。。。。。
HTML DOM 節(jié)點(diǎn)列表
getElementsByTagName() 方法返回節(jié)點(diǎn)列表。節(jié)點(diǎn)列表是一個(gè)節(jié)點(diǎn)數(shù)組。
注意：下標(biāo)號(hào)從 0 開(kāi)始。
。。。。。。。。。。。
HTML DOM 節(jié)點(diǎn)列表長(zhǎng)度
length 屬性定義節(jié)點(diǎn)列表中節(jié)點(diǎn)的數(shù)量。
。。。。。。。。。。。
導(dǎo)航節(jié)點(diǎn)關(guān)系
您能夠使用三個(gè)節(jié)點(diǎn)屬性：parentNode、firstChild 以及 lastChild ，在文檔結(jié)構(gòu)中進(jìn)行導(dǎo)航。
firstChild 屬性可用于訪問(wèn)元素的文本
。。。。。。。。。。。
DOM 根節(jié)點(diǎn)
這里有兩個(gè)特殊的屬性，可以訪問(wèn)全部文檔
document.documentElement - 全部文檔
document.body - 文檔的主體
。。。。。。。。。。。
childNodes 和 nodeValue
除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來(lái)獲取元素的內(nèi)容。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
