更新時間:2021年06月16日18時21分 來源:傳智教育 瀏覽次數(shù):
JavaScript中,經(jīng)常需要操作DOM。所謂DOM指的是文檔對象模型(Document Object Model)。它提供了對文檔結(jié)構(gòu)化的描述,并將HTML頁面與腳本、程序語言聯(lián)系起來。
為了大家更好地理解,下面演示-段HTML代碼以及其對應的DOM樹形結(jié)構(gòu)圖,如下所示。
<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樹形結(jié)構(gòu)如下圖所示。
上圖中,所有的元素內(nèi)容都是一個節(jié)點。其中,<html>是所有內(nèi)容的根節(jié)點,<body>是<h1>和<ul>的父節(jié)點。<a> 和<meta>標簽下面的分支href與charset是標簽的屬性,在DOM中稱為屬性節(jié)點;標簽下面的文本是屬于該標簽內(nèi)部的文字,在DOM中稱為文本節(jié)點。
在了解什么是DOM后,就不再難理解什么是DOM對象。DOM對象就是JavaScript操作DOM所使用的對象。例如,獲取以上HTML代碼中l(wèi)i標簽的DOM對象,并調(diào)用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標簽的文本內(nèi)容
猜你喜歡: