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

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

IT培訓(xùn)班

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

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

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

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

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

1623828868292_DOM樹(shù)形結(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樹(shù)關(guān)鍵名詞解釋

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

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

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

上一篇：node的優(yōu)缺點(diǎn)是什么？ 下一篇：什么是jQuery對(duì)象?