HTMLCollection對象

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

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

1：getElementsByTagName()

2：document.forms.item()

3: document.forms.namedItem()

HTMLCollection 對象類似 HTML 元素的一個(gè)數(shù)組,獲取的是html元素集合。

NodeList對象

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

所有瀏覽器的 childNodes 屬性返回的是 NodeList 對象。大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象。NodeList對象有個(gè)length屬性和item()方法，length表示所獲得的NodeList對象的節(jié)點(diǎn)個(gè)數(shù)，這里還是要強(qiáng)調(diào)的是節(jié)點(diǎn)，而item()可以傳入一個(gè)索引來訪問Nodelist中相應(yīng)索引的元素。

NodeList是一個(gè)節(jié)點(diǎn)的集合(既可以包含元素和其他節(jié)點(diǎn))。

看如下代碼：

<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>

打印結(jié)果如下：

得到是HTMLCollection對象，我們看一下div,target的ChildNodes，因?yàn)樗荖odeList對象,

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

HTMLColection 與 NodeList 的區(qū)別

HTMLCollection 是 HTML 元素的集合。

NodeList 是一個(gè)文檔節(jié)點(diǎn)的集合。

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

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

NodeList 與 HTMLCollection 都有 length 屬性。

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

NodeList 只能通過索引來獲取。

只有 NodeList 對象有包含屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。

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

HTMLCollection和NodeList 實(shí)時(shí)性

它們能隨著文檔的改變而改變，當(dāng)我們用js插入刪除節(jié)點(diǎn)是它們也隨之改變。

querySelectorAll這個(gè)接口返回的nodeList對象比較特殊，它是個(gè)靜態(tài)的對象。

看如下代碼：

<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>

這一點(diǎn)需要注意，querySelectorAll沒有實(shí)時(shí)性。

如果您在前端學(xué)習(xí)的過程中遇到難題，歡迎關(guān)注微信公眾號(hào)【筑夢前端】，大家一起交流解決！

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

作者：wust_cyl

來源：CSDN

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

總結(jié)

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

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