溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)html中dom指的是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
一、DOM介紹
1、DOM簡介
DOM是指文檔對象模型，它是專門適用于HTML/XHTML的文檔對象模型。如果你是一名軟件開發(fā)人員，那么你可以將它理解為網(wǎng)頁的API。DOM將網(wǎng)頁中的各個元素都看作一個對象，使網(wǎng)頁中的元素也可以被計算機語言獲取或編輯，如javascript可以利用DOM動態(tài)地修改網(wǎng)頁。
1.2、根據(jù)操作對象對DOM分類
按照操作對象的不同，可分為Core DOM、XML DOM 和 HTML DOM。
Core Dom：核心Dom，針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型。
XML DOM：用于XML文檔的標(biāo)準(zhǔn)模型，對XML元素進行操作。
HTML DOM： 用于HTML文檔的標(biāo)準(zhǔn)模型，對HTML元素進行操作。
1.3、DOM功能
① 查詢某個元素
② 查詢某個元素的祖先、兄弟以及后代元素
③ 獲取、修改元素的屬性
④ 獲取、修改元素的內(nèi)容
⑤ 創(chuàng)建、插入和刪除元素
二、DOM節(jié)點
文檔中的所有內(nèi)容都可表示為一個節(jié)點(node)，如：HTML里整個文檔、每個標(biāo)簽、每個標(biāo)簽的屬性和文本都可作為一個節(jié)點。
2.1、節(jié)點分類
① 文檔節(jié)點(Document)：整個XML、HTML文檔
② 元素節(jié)點(Element)：每個XML、HTML元素
③ 屬性節(jié)點(Attr)：每個XML、HTML元素的屬性
④ 文本節(jié)點(Text)：每個XML、HTML元素內(nèi)的文本
⑤ 注釋節(jié)點(Comment)：每個注釋
注意：這里的Document節(jié)點為總稱，具體可分為XMLDocument和HTMLDocument，同理Element也可分為XMLElement和HTMLElement。
2.2、HTML DOM節(jié)點層次
節(jié)點彼此都有等級關(guān)系：父節(jié)點、兄弟節(jié)點、子節(jié)點等等。
（1）示例：
HTML文檔轉(zhuǎn)換為HTML DOM節(jié)點樹
（2）示例圖分析
1) <head>元素和<body>元素的父節(jié)點為<html>元素。
2) <head>元素和<body>元素為兄弟節(jié)點。
3) <title>元素為<head>元素的子節(jié)點。
三、HTML DOM節(jié)點屬性
介紹HTML DOM節(jié)點屬性，如：innerHTML、innerText、nodeName、nodeValue以及nodeType等。
3.1、innerHTML：以HTML代碼格式獲取或設(shè)置節(jié)點的內(nèi)容
說明：以HTML格式賦值給innerHTML屬性時，會以HTML的形式呈現(xiàn)。比如：node.innerHTML="<input type='button' value='按鈕' />" 將會顯示一個按鈕。
示例：
document.getElementById('div').innerHTML="<input type='button' value='按鈕' />"; // 設(shè)置div元素的innerHTML為一個按鈕
document.getElementById('div').innerHTML; // => <input type='button' value='按鈕' /> ：以HTML格式返回節(jié)點的內(nèi)容
3.2、innerText：獲取或設(shè)置節(jié)點的文本內(nèi)容
說明：以文本字符串的形式獲取或設(shè)置節(jié)點的內(nèi)容。
示例1：
賦值HTML格式內(nèi)容<input type='button' value='按鈕' /> 將會以字符串顯示"<input type='button' value='按鈕' />"。
示例2：
獲取內(nèi)容時，只會獲取文本內(nèi)容。
document.getElementById('div').innerText; // => "文本1 文本2"3.3、nodeName：獲取節(jié)點名稱，只讀屬性
說明：
（學(xué)習(xí)視頻分享：html視頻教程）
示例：
console.log( document.nodeName ); // => #document：文檔節(jié)點
console.log( document.body.nodeName ); // => BODY：元素節(jié)點
console.log( document.getElementById('div').nodeName ); // => DIV：元素節(jié)點
console.log( document.getElementById('div').attributes.style.nodeName ); // => style：屬性節(jié)點3.4、nodeValue：獲取或設(shè)置節(jié)點的值
說明：文檔節(jié)點、元素節(jié)點此屬性返回null，并且為只讀。
示例：
console.log( document.nodeValue ); // => null：文檔節(jié)點
console.log( document.body.nodeValue ); // => null：元素節(jié)點
console.log( document.getElementById('div').nodeValue ); // => null：元素節(jié)點
console.log( document.getElementById('div').attributes.style.nodeValue ); // => width:200px;height:100px;border:1px solid black;：style屬性的值
document.getElementById('div').attributes.style.nodeValue = ' width:200px;height:200px'; // 設(shè)置style屬性的值3.5、nodeType：返回節(jié)點類型，只讀屬性
說明：
示例：
console.log( document.nodeType ); // => 9：文檔節(jié)點
console.log( document.body.nodeType ); // => 1：元素節(jié)點
console.log( document.getElementById('div').nodeType ); // => 1：元素節(jié)點
console.log( document.getElementById('div').attributes.style.nodeType ); // => 2：屬性節(jié)點四、獲取 HTML 元素節(jié)點方法
文檔節(jié)點(document)、元素節(jié)點可以通過getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法獲取元素節(jié)點。
4.1、getElementById(id) ：獲取指定ID的元素
參數(shù)：
①id {string} ：元素ID。
返回值：
{HtmlElement} 元素節(jié)點對象。若沒有找到，返回null。
注意：
① HTML元素ID是區(qū)分大小寫的。
② 若沒有找到指定ID的元素，返回null。
③ 若一個父節(jié)點下面有多個相同ID元素時，默認(rèn)選取第一個(而不是層級最高的)。
示例：
document.getElementById('div'); // => 獲取ID為div的元素4.2、getElementsByName(name) ：返回一個包含指定name名稱的的元素數(shù)組
參數(shù)：
① name {string} ：name名稱。
返回值：
{Array} 符合條件的元素數(shù)組。若沒有找到符合條件的，返回空數(shù)組。
示例：
document.getElementsByName('Btn'); // 返回一個name為btn的元素數(shù)組4.3、getElementsByClassName(className) ：返回一個包含指定class名稱的的元素數(shù)組
參數(shù)：
① className {string} ：class名稱。
返回值：
{Array} 符合條件的元素數(shù)組。若沒有找到符合條件的，返回空數(shù)組。
示例：
document.getElementsByClassName('show'); // 返回一個class包含show的元素數(shù)組4.4、getElementsByTagName(elementName) ：返回一個指定標(biāo)簽名稱的的元素數(shù)組
參數(shù)：
① elementName {string} ：標(biāo)簽名稱。如：div、a等等
返回值：
{Array} 符合條件的元素數(shù)組。若沒有找到符合條件的，返回空數(shù)組。
示例：
document.getElementsByTagName('div'); // 返回一個標(biāo)簽為div的元素數(shù)組感謝各位的閱讀！關(guān)于“html中dom指的是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼