什么是DOM對象?DOM樹形結構介紹

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

IT培訓班

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

為了大家更好地理解，下面演示-段HTML代碼以及其對應的DOM樹形結構圖，如下所示。

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

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

對應上述HTML代碼的DOM樹形結構如下圖所示。

1623828868292_DOM樹形結構.jpg

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

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

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

猜你喜歡：

什么是DOM？DOM樹關鍵名詞解釋

DOM有多少事件級別？DOM事件級別

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

傳智教育HTML&JS+前端培訓課程

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