這篇文章給大家分享的是有關html中dom指的是什么的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)是一家集網站建設,彝良企業(yè)網站建設,彝良品牌網站建設,網站定制,彝良網站建設報價,網絡營銷,網絡優(yōu)化,彝良網站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。一、DOM介紹
1、DOM簡介
DOM是指文檔對象模型,它是專門適用于HTML/XHTML的文檔對象模型。如果你是一名軟件開發(fā)人員,那么你可以將它理解為網頁的API。DOM將網頁中的各個元素都看作一個對象,使網頁中的元素也可以被計算機語言獲取或編輯,如javascript可以利用DOM動態(tài)地修改網頁。
1.2、根據操作對象對DOM分類
按照操作對象的不同,可分為Core DOM、XML DOM 和 HTML DOM。
Core Dom:核心Dom,針對任何結構化文檔的標準模型。
XML DOM:用于XML文檔的標準模型,對XML元素進行操作。
HTML DOM: 用于HTML文檔的標準模型,對HTML元素進行操作。
1.3、DOM功能
① 查詢某個元素
② 查詢某個元素的祖先、兄弟以及后代元素
③ 獲取、修改元素的屬性
④ 獲取、修改元素的內容
⑤ 創(chuàng)建、插入和刪除元素
二、DOM節(jié)點
文檔中的所有內容都可表示為一個節(jié)點(node),如:HTML里整個文檔、每個標簽、每個標簽的屬性和文本都可作為一個節(jié)點。
2.1、節(jié)點分類
① 文檔節(jié)點(Document):整個XML、HTML文檔
② 元素節(jié)點(Element):每個XML、HTML元素
③ 屬性節(jié)點(Attr):每個XML、HTML元素的屬性
④ 文本節(jié)點(Text):每個XML、HTML元素內的文本
⑤ 注釋節(jié)點(Comment):每個注釋
注意:這里的Document節(jié)點為總稱,具體可分為XMLDocument和HTMLDocument,同理Element也可分為XMLElement和HTMLElement。
2.2、HTML DOM節(jié)點層次
節(jié)點彼此都有等級關系:父節(jié)點、兄弟節(jié)點、子節(jié)點等等。
(1)示例:
HTML文檔轉換為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代碼格式獲取或設置節(jié)點的內容
說明:以HTML格式賦值給innerHTML屬性時,會以HTML的形式呈現(xiàn)。比如:node.innerHTML="<input type='button' value='按鈕' />" 將會顯示一個按鈕。
示例:
document.getElementById('div').innerHTML="<input type='button' value='按鈕' />"; // 設置div元素的innerHTML為一個按鈕 document.getElementById('div').innerHTML; // => <input type='button' value='按鈕' /> :以HTML格式返回節(jié)點的內容
3.2、innerText:獲取或設置節(jié)點的文本內容
說明:以文本字符串的形式獲取或設置節(jié)點的內容。
示例1:
賦值HTML格式內容<input type='button' value='按鈕' /> 將會以字符串顯示"<input type='button' value='按鈕' />"。
示例2:
獲取內容時,只會獲取文本內容。
document.getElementById('div').innerText; // => "文本1 文本2"
3.3、nodeName:獲取節(jié)點名稱,只讀屬性
說明:
(學習視頻分享: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:獲取或設置節(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'; // 設置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元素時,默認選取第一個(而不是層級高的)。
示例:
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) :返回一個指定標簽名稱的的元素數(shù)組
參數(shù):
① elementName {string} :標簽名稱。如:div、a等等
返回值:
{Array} 符合條件的元素數(shù)組。若沒有找到符合條件的,返回空數(shù)組。
示例:
document.getElementsByTagName('div'); // 返回一個標簽為div的元素數(shù)組
感謝各位的閱讀!關于“html中dom指的是什么”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
文章名稱:html中dom指的是什么-創(chuàng)新互聯(lián)
文章轉載:http://www.rwnh.cn/article44/cegjee.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供網站建設、網站策劃、小程序開發(fā)、商城網站、服務器托管、域名注冊
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容