當(dāng)前位置：首頁(yè) > 人文社科 > 生活经验 >内容正文

生活经验

获取DOM节点的几种方式

發(fā)布時(shí)間：2023/11/27 生活经验 37 豆豆

生活随笔收集整理的這篇文章主要介紹了获取DOM节点的几种方式小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

DOM 是一個(gè)樹(shù)形結(jié)構(gòu)，操作一個(gè)DOM節(jié)點(diǎn)，實(shí)際上就是這幾個(gè)操作：更新、刪除、添加、遍歷

在操作DOM節(jié)點(diǎn)之前，需要通過(guò)各種方式先拿到這個(gè)DOM節(jié)點(diǎn)，常用的方法有：

一、通過(guò)元素類(lèi)型的方法來(lái)操作：

document.getElementById();//id名，在實(shí)際開(kāi)發(fā)中較少使用，選擇器中多用class? id一般只用在頂級(jí)層存在不能太過(guò)依賴(lài)id
document.getElementsByTagName();//標(biāo)簽名
document.getElementsByClassName();//類(lèi)名
document.getElementsByName();//name屬性值，一般不用
document.querySelector();//css選擇符模式，返回與該模式匹配的第一個(gè)元素，結(jié)果為一個(gè)元素；如果沒(méi)找到匹配的元素，則返回null
document.querySelectorAll()//css選擇符模式，返回與該模式匹配的所有元素，結(jié)果為一個(gè)類(lèi)數(shù)組

注意：

前綴為document，意思是在document節(jié)點(diǎn)下調(diào)用這些方法，當(dāng)然也可以在其他的元素節(jié)點(diǎn)下調(diào)用，如：

<div id="myDiv"><p>html</p><p>css</p><p>javascript</p>
</div>
<p>jquery</p><script>var div=document.getElementById("myDiv");var p1=div.getElementsByTagName("p");//在div下調(diào)用alert(p1.length);//3  div節(jié)點(diǎn)下的p元素只有三個(gè)var p2 = document.getElementsByTagName("p");alert(p2.length);//4  document節(jié)點(diǎn)下的p元素有四個(gè)</script>

querySelector()和querySelectorAll()方法，最后兩個(gè)為靜態(tài)的，不是實(shí)時(shí)的，保存的是當(dāng)時(shí)的狀態(tài)，是一個(gè)副本，即：在以后的代碼中通過(guò)方法使所選元素發(fā)生了變化，但該值依然不會(huì)改變，因此使用有局限性，一般不用，除非就想得到副本

舉例如下：

        <div id="myDiv"><p>html</p><p>css</p><p>javascript</p></div><p>jquery</p><script>var div=document.getElementById("myDiv");var p1=div.getElementsByTagName("p");alert(p1.length);//3var p2 = document.getElementsByTagName("p");alert(p2.length);//4var p3=document.querySelectorAll("p");alert(p3.length);//4
        document.body.appendChild(document.createElement("p"));//創(chuàng)建新元素P,并添加到body中
        alert(p1.length);//3   div節(jié)點(diǎn)下的p元素依然只有三個(gè)
        alert(p2.length);//5   在body中添加了一個(gè)新的P元素，該方法是“動(dòng)態(tài)的”，因此，長(zhǎng)度發(fā)生了變化
        alert(p3.length);//4   該方法是“靜態(tài)的”，因此，無(wú)論發(fā)生什么變化，p3的值依然不會(huì)發(fā)生改變

二、根據(jù)關(guān)系樹(shù)來(lái)選擇（遍歷節(jié)點(diǎn)樹(shù)）：

【先簡(jiǎn)單介紹一下節(jié)點(diǎn)：

DOM（文檔對(duì)象模型）可以將任何HTML、XML文檔描繪成一個(gè)多層次的節(jié)點(diǎn)樹(shù)。所有的頁(yè)面都表現(xiàn)為以一個(gè)特定節(jié)點(diǎn)為根節(jié)點(diǎn)的樹(shù)形結(jié)構(gòu)。html文檔中根節(jié)點(diǎn)為document節(jié)點(diǎn)。

所有節(jié)點(diǎn)都有nodeType屬性，代表節(jié)點(diǎn)的不同類(lèi)型，通過(guò)nodeType屬性可以來(lái)判斷節(jié)點(diǎn)的類(lèi)型。經(jīng)常使用的節(jié)點(diǎn)主要有以下幾種類(lèi)型：

Element類(lèi)型（元素節(jié)點(diǎn)）：nodeType值為 1
Text類(lèi)型（文本節(jié)點(diǎn)）：nodeType值為 3
Comment類(lèi)型（注釋節(jié)點(diǎn)）：nodeType值為 8
Document類(lèi)型（document節(jié)點(diǎn)）：nodeType值為 9；其規(guī)定的一些常用的屬性有
document.body??? document.head? 分別為HTML中的 <body><head>

document.documentElement為<html>標(biāo)簽

所有的節(jié)點(diǎn)都有?? hasChildNodes()方法 ?? 判斷有無(wú)子節(jié)點(diǎn)? 有一個(gè)或多個(gè)子節(jié)點(diǎn)時(shí)返回true】

通過(guò)一些屬性可以來(lái)遍歷節(jié)點(diǎn)樹(shù)：

parentNode//獲取所選節(jié)點(diǎn)的父節(jié)點(diǎn)，最頂層的節(jié)點(diǎn)為#document
childNodes //獲取所選節(jié)點(diǎn)的子節(jié)點(diǎn)們?
firstChild //獲取所選節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
lastChild //獲取所選節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
nextSibling //獲取所選節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)? 列表中最后一個(gè)節(jié)點(diǎn)的nextSibling屬性值為null
previousSibling //獲取所選節(jié)點(diǎn)的前一兄弟節(jié)點(diǎn)?? 列表中第一個(gè)節(jié)點(diǎn)的previousSibling屬性值為null

        <div id="myDiv"><p>html</p><p>css</p><p>javascript</p></div><p>jquery</p><script>var div = document.getElementById("myDiv");alert(div.childNodes.length);//7

在上邊的例子中可以看出，div元素節(jié)點(diǎn)的所有子節(jié)點(diǎn)一共有7個(gè)，在后臺(tái)查看可以得知：div元素節(jié)點(diǎn)的所有子節(jié)點(diǎn)包括? 4個(gè)文本節(jié)點(diǎn)（在此全為空文本）和三個(gè)元素節(jié)

        <div id="myDiv">第一個(gè) 文本節(jié)點(diǎn)<p>html</p>第二個(gè)   文本節(jié)點(diǎn)<p>css</p>第三個(gè)  文本節(jié)點(diǎn)<p>javascript</p>第四個(gè)
 文本節(jié)點(diǎn)</div>

由于文檔中的節(jié)點(diǎn)類(lèi)型較多，遍歷子節(jié)點(diǎn)的結(jié)果很多時(shí)候并不能得到我們想要的結(jié)果，使用遍歷元素節(jié)點(diǎn)則很方便

三、基于元素節(jié)點(diǎn)樹(shù)的遍歷（遍歷元素節(jié)點(diǎn)樹(shù)）：

parentElement　//返回當(dāng)前元素的父元素節(jié)點(diǎn)（IE9以下不兼容）
children? // 返回當(dāng)前元素的元素子節(jié)點(diǎn)
firstElementChild //返回的是第一個(gè)元素子節(jié)點(diǎn)（IE9以下不兼容）
lastElementChild? //返回的是最后一個(gè)元素子節(jié)點(diǎn)（IE9以下不兼容）
nextElementSibling? //返回的是后一個(gè)兄弟元素節(jié)點(diǎn)（IE9以下不兼容）
previousElementSibling? //返回的是前一個(gè)兄弟元素節(jié)點(diǎn)（IE9以下不兼容）

        <div id="myDiv"><p>html</p><p>css</p><p>javascript</p></div><p>jquery</p><script>var div = document.getElementById("myDiv");alert(div.children.length);//3

遍歷元素節(jié)點(diǎn)雖然方便，但是除了children屬性外，其他的屬性則IE9以下不兼容

?注意一點(diǎn)：這些獲取節(jié)點(diǎn)的方式，返回值要么是一個(gè)特定的節(jié)點(diǎn)，要么是一個(gè)集合HTMLCollection,這個(gè)節(jié)點(diǎn)的集合是一個(gè)類(lèi)數(shù)組

轉(zhuǎn)載于:https://www.cnblogs.com/lihuijuan/p/8641775.html

總結(jié)

以上是生活随笔為你收集整理的获取DOM节点的几种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。