當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

获取DOM元素方法小结

發布時間：2023/12/2 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了获取DOM元素方法小结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在開發中不可避免的需要操作DOM，現在就來總結一下原生的獲取DOM的API。

getElementById()

該方法是最常用的通過元素的id屬性來獲取DOM元素的API，返回一個DOM元素。

<body><div id="div">我是div</div><script type="text/javascript">var div = document.getElementById("div");console.log(div); // 打印一個DOM元素</script> </body>

getElementById() 只能在HTMLDocument類型的實例（document對象）上調用，并不能在元素上使用該方法。

<body><div id="div">我是div<p id="p">我是p</p></div><script type="text/javascript">var div = document.getElementById("div");var p = div.getElementById("p"); // 報錯了 div上并沒有getElementById方法</script> </body>

其實仔細想來也可以理解，元素具有id屬性的值在頁面上是唯一的（符合標準的話，寫多個相同id也攔不住），所以在document下查找具有該id的元素和在某個元素下查找具有該id的元素是一樣的。

getElementsByTagName()

通過標簽名獲取DOM元素的一個集合，該集合的類型是HTMLCollection，并且該方法可以在DOM元素上調用。

<body><div id="div"><p>我是p1</p><p>我是p2</p></div><script type="text/javascript">var div = document.getElementById("div");var pCol = document.getElementsByTagName("p"); // 返回具有兩個p元素的HTMLCollection集合var pCol1 = div.getElementsByTagName("p"); // 返回具有兩個p元素的HTMLCollection集合</script> </body>

關于HTMLCollection：是一個元素的集合，是有生命的會呼吸的，該集合并不是一個快照，一個死的，它是會變化的。與之類似的較為熟悉的集合還有NodeList和NamedNodeMap。

以上代碼會出現無限循環。若pCol是當時的一個快照上面的循環應該只循環兩次。因為pCol這個HTMLCollection集合是會變化的。當添加一個p元素到div元素中pCol元素集合就增加了一個元素，length也隨之增加，這樣永遠不會滿足 i >= pCol.length 的條件，所以出現了無限循環。

而是一個活的會呼吸的集合的不只有HTMLCollection一個，其中較為熟悉的有NodeList和NamedNodeMap。

注：可以使用一個變量存一下pCol.length就不會出現這種情況了。

getElementsByName()

該方法很少用，但是在操作表單的時候還是有用武之處的。通過元素名來獲取DOM元素集合（NodeList類型），并且只能在document對象上調用。

<body><form id="form"><input type="radio" name="sex" value="0"/><input type="radio" name="sex" value="1"/></form><script type="text/javascript">var input = document.getElementsByName("sex"); // 返回一個NodeList類型的集合有兩個input標簽</script> </body>

注：高程上說該方法返回的HTMLCollection集合，但是通過chrome，Firefox，Safari測試返回的類型都是NodeList。

querySelector()和querySelectorAll()

querySelector()通過合法的CSS選擇器來獲取DOM元素（只會獲取第一個匹配的元素），如果傳入不合法的CSS選擇符該方法會報錯（包括下面的querySelectorAll()方法也會因為不正確的選擇符報錯），該方法可以在元素上調用。

<body><div id="div"><p class="p" name="p">p1</p><p id="p" name="p">p2</p></div><script type="text/javascript">var div = document.querySelector("#div"); // 第一個一個id為div的div元素var p = document.querySelector("p"); // 第一個一個p元素var p1 = div.querySelector("p[name='p']"); // 第一個具有name屬性，并且值為p的p元素</script> </body>

querySelectorAll()同樣通過合法的CSS選擇器來獲取元素，只是返回的是所有符合條件的元素，而不是第一個符合條件的元素，所以返回的是一個NodeList類型的DOM元素集合。但是這個NodeList集合和上面所說的活的，會呼吸的NodeList不一樣，通過querySelectorAll()方法獲取的只是一個快照，并不會動態改變。該方法同樣可以在元素上調用。

上面只是在body末尾添加了兩個p元素，并沒有無限循環下去。

getElementsByClassName()

千呼萬喚始出來的一個原生API，在這個API出來之前就被各種實現了，當然就性能上來說當然原生的好。

返回一個HTMLCollection的DOM元素集合，并且可以在元素上調用。

<body><div id="div"><p class="p">p1</p><p class="p">p2</p></div><script type="text/javascript">var div = document.getElementById("div");var ps = div.getElementsByClassName("p"); // 返回一個HTMLCollection集合</script> </body>

屬性

除了通過以上的方法獲取DOM元素或元素集合外還可以通過DOM元素的屬性來獲取DOM元素和元素集合。

childNodes // NodeList類型 childdren // HTMLCollection類型 firstChild lastChild previousSibling nextSibling previousElementSibling nextElementSibling firstElementChild lastElementChild

以下集合都是HTMLCollection類型

document.images 所有的img標簽集合 document.anchors 所有具有name特性的a標簽集合 document.links 所有具有link特性的a標簽集合 document.forms 所有form標簽集合

NodeList和HTMLCollection的區別

我的理解很簡單就是NodeList是節點的集合HTMLCollection是元素節點的集合。NodeList中可能包含HTML元素之外的節點比如文本節點，但是HTMLCollection只會包含HTML元素節點。

HTMLCollection有NamedItem() 方法而NodeList沒有。

<body><div id="div"><p>p1</p><p>p2</p><p>p3</p></div><script type="text/javascript">var div = document.querySelector("#div");var childs = div.childNodes; // 一個NodeList集合console.log(childs);for(var i = 0, len = childs.length; i < len; i++){console.log(childs[i].nodeType, childs[i].nodeName) // 會打印出 3 “#text” 表示是文本節點}var children = div.children; // 一個HTMLCollection集合console.log(children);for(var i = 0, len = children.length; i < len; i++){console.log(children[i].nodeType, children[i].nodeName) // 并沒有打印出 3 “#text” 只出現了 1 “P” 元素節點}</script> </body>

但是上面的結論也有疑惑的地方比如querySelectorAll()只能返回HTML元素，但是他的類型確是NodeList，還有getElementsByName()明顯返回的也是HTML元素但是同樣類型是NodeList類型。

想進一步了解兩者之間的區別和聯系可以看看知乎上的這個問題。

總結

以上是生活随笔為你收集整理的获取DOM元素方法小结的全部內容，希望文章能夠幫你解決所遇到的問題。

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