當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

获取DOM节点的几种方式

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

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

DOM 是一個樹形結構，操作一個DOM節(jié)點，實際上就是這幾個操作：更新、刪除、添加、遍歷

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

一、通過元素類型的方法來操作：

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

注意：

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

<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下調用alert(p1.length);//3  div節(jié)點下的p元素只有三個var p2 = document.getElementsByTagName("p");alert(p2.length);//4  document節(jié)點下的p元素有四個</script>

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

舉例如下：

        <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é)點下的p元素依然只有三個
        alert(p2.length);//5   在body中添加了一個新的P元素，該方法是“動態(tài)的”，因此，長度發(fā)生了變化
        alert(p3.length);//4   該方法是“靜態(tài)的”，因此，無論發(fā)生什么變化，p3的值依然不會發(fā)生改變

二、根據(jù)關系樹來選擇（遍歷節(jié)點樹）：

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

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

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

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

document.documentElement為<html>標簽

所有的節(jié)點都有?? hasChildNodes()方法 ?? 判斷有無子節(jié)點? 有一個或多個子節(jié)點時返回true】

通過一些屬性可以來遍歷節(jié)點樹：

parentNode//獲取所選節(jié)點的父節(jié)點，最頂層的節(jié)點為#document
childNodes //獲取所選節(jié)點的子節(jié)點們?
firstChild //獲取所選節(jié)點的第一個子節(jié)點
lastChild //獲取所選節(jié)點的最后一個子節(jié)點
nextSibling //獲取所選節(jié)點的后一個兄弟節(jié)點? 列表中最后一個節(jié)點的nextSibling屬性值為null
previousSibling //獲取所選節(jié)點的前一兄弟節(jié)點?? 列表中第一個節(jié)點的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é)點的所有子節(jié)點一共有7個，在后臺查看可以得知：div元素節(jié)點的所有子節(jié)點包括? 4個文本節(jié)點（在此全為空文本）和三個元素節(jié)

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

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

三、基于元素節(jié)點樹的遍歷（遍歷元素節(jié)點樹）：

parentElement　//返回當前元素的父元素節(jié)點（IE9以下不兼容）
children? // 返回當前元素的元素子節(jié)點
firstElementChild //返回的是第一個元素子節(jié)點（IE9以下不兼容）
lastElementChild? //返回的是最后一個元素子節(jié)點（IE9以下不兼容）
nextElementSibling? //返回的是后一個兄弟元素節(jié)點（IE9以下不兼容）
previousElementSibling? //返回的是前一個兄弟元素節(jié)點（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é)點雖然方便，但是除了children屬性外，其他的屬性則IE9以下不兼容

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

轉載于:https://www.cnblogs.com/lihuijuan/p/8641775.html

總結

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

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