HTMLCollection對象

HTMLCollection是元素集合，它和NodeList很像，有length屬性來表示HTMLCollection對象的長度，也可以通過elements.item()傳入元素索引來訪問。當時它還有一個nameItem()方法，可以返回集合中name屬性和id屬性值得元素。

可以通過三種方法獲取HTMLCollection對象

1：getElementsByTagName()

2：document.forms.item()

3: document.forms.namedItem()

HTMLCollection 對象類似 HTML 元素的一個數組,獲取的是html元素集合。

NodeList對象

NodeList 對象是一個從文檔中獲取的節點列表 (集合) 。一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 對象，而不是 HTMLCollection 對象。

所有瀏覽器的 childNodes 屬性返回的是 NodeList 對象。大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象。NodeList對象有個length屬性和item()方法，length表示所獲得的NodeList對象的節點個數，這里還是要強調的是節點，而item()可以傳入一個索引來訪問Nodelist中相應索引的元素。

NodeList是一個節點的集合(既可以包含元素和其他節點)。

看如下代碼：

<div class='target'><!-- 666 --><span >item1</span><span >item2</span><span >item3</span></div><script type="text/javascript">var target=document.getElementsByTagName('div');console.log(target); </script>

打印結果如下：

得到是HTMLCollection對象，我們看一下div,target的ChildNodes，因為它是NodeList對象,

我們注意到有9個節點，分別是div與注釋節點的空白文本節點，注釋節點，注釋節點和<span>之間的空白文本節點，然后依次類推，直到最后一個span與div的空白文本節點。

HTMLColection 與 NodeList 的區別

HTMLCollection 是 HTML 元素的集合。

NodeList 是一個文檔節點的集合。

NodeList 與 HTMLCollection 有很多類似的地方。

NodeList 與 HTMLCollection 都與數組對象有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。

NodeList 與 HTMLCollection 都有 length 屬性。

HTMLCollection 元素可以通過 name，id 或索引來獲取。

NodeList 只能通過索引來獲取。

只有 NodeList 對象有包含屬性節點和文本節點。

它們看起來像一個數組但是不是數組，可以叫類數組，無法使用數組的方法： valueOf(), pop(), push(), 或 join()。

HTMLCollection和NodeList 實時性

它們能隨著文檔的改變而改變，當我們用js插入刪除節點是它們也隨之改變。

querySelectorAll這個接口返回的nodeList對象比較特殊，它是個靜態的對象。

看如下代碼：

<div class='target'><!-- 666 --><span >item1</span><span >item2</span><span >item3</span></div><script type="text/javascript">var target1=document.getElementsByTagName('span');var target2=document.querySelectorAll('span');console.log(target1.length); console.log(target2.length); document.getElementsByTagName('div')[0].appendChild(document.createElement('span'));console.log(target1.length); console.log(target2.length); </script>

這一點需要注意，querySelectorAll沒有實時性。

如果您在前端學習的過程中遇到難題，歡迎關注微信公眾號【筑夢前端】，大家一起交流解決！

--------------------

作者：wust_cyl

來源：CSDN

原文：https://blog.csdn.net/wust_cyl/article/details/81267045

總結

以上是生活随笔為你收集整理的span居div中_JavaScript-html Dom中的HTMLCollection和NodeList的全部內容，希望文章能夠幫你解決所遇到的問題。

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