首頁技術(shù)文章正文

什么是DOM對(duì)象?DOM樹形結(jié)構(gòu)介紹

更新時(shí)間:2021-06-16 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

JavaScript中,經(jīng)常需要操作DOM。所謂DOM指的是文檔對(duì)象模型(Document Object Model)。它提供了對(duì)文檔結(jié)構(gòu)化的描述,并將HTML頁面與腳本、程序語言聯(lián)系起來。

為了大家更好地理解,下面演示-段HTML代碼以及其對(duì)應(yīng)的DOM樹形結(jié)構(gòu)圖,如下所示。

<html>
	<head>
		<meta charset="UTF-8">
		<title>測試</title>
	</head>
	<body>
		<h1>標(biāo)題</h1>
		<ul>
			<1i>
				<a href="#">鏈接</a>
			</1i>
		</ul>
	</body>
</html>


上述代碼中,層層嵌套的HTML標(biāo)簽就是一個(gè)類似樹形的DOM文檔。其中,最外面的一層是<html>標(biāo)簽,<htm1>標(biāo)簽中嵌套著<head>標(biāo)簽和<body>標(biāo)簽,而這兩個(gè)標(biāo)簽中也會(huì)嵌套其他標(biāo)簽,這樣一層層的延伸很像一棵倒著的樹。

對(duì)應(yīng)上述HTML代碼的DOM樹形結(jié)構(gòu)如下圖所示。

1623828868292_DOM樹形結(jié)構(gòu).jpg

上圖中,所有的元素內(nèi)容都是一個(gè)節(jié)點(diǎn)。其中,<html>是所有內(nèi)容的根節(jié)點(diǎn),<body>是<h1>和<ul>的父節(jié)點(diǎn)。<a> 和<meta>標(biāo)簽下面的分支href與charset是標(biāo)簽的屬性,在DOM中稱為屬性節(jié)點(diǎn);標(biāo)簽下面的文本是屬于該標(biāo)簽內(nèi)部的文字,在DOM中稱為文本節(jié)點(diǎn)。

在了解什么是DOM后,就不再難理解什么是DOM對(duì)象。DOM對(duì)象就是JavaScript操作DOM所使用的對(duì)象。例如,獲取以上HTML代碼中l(wèi)i標(biāo)簽的DOM對(duì)象,并調(diào)用innerText屬性獲取第一個(gè)li標(biāo)簽的文本,如下所示。


//獲取1i標(biāo)簽對(duì)象集合: HTMLCollection(2) [li, li]
var lis = document.getElementsByTagName('li');
var firstLi = lis[0];    //獲取第1個(gè)1i標(biāo)簽的DOM對(duì)象
var text = firstLi.innerText;    //獲取第1個(gè)1i標(biāo)簽的文本內(nèi)容


猜你喜歡:

什么是DOM?DOM樹關(guān)鍵名詞解釋

DOM有多少事件級(jí)別?DOM事件級(jí)別

BOM有幾部分組成?BOM與DOM的區(qū)別是什么?

傳智教育HTML&JS+前端培訓(xùn)課程

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!