教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

DOM指的是什么？如何理解DOM？

更新時(shí)間:2021年06月16日18時(shí)21分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑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)鍵名詞解釋

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

jQuery如何使用css方法修改單個(gè)樣式？

jQuery中的prop和attr

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

0 分享到：
和我們?cè)诰€交談！