理解 DOM 中 HTMLCollections、NodeList 和對(duì)象數(shù)組之間的差異

使用 DOM 時(shí)，三種關(guān)鍵類型的集合發(fā)揮作用：HTMLCollections、節(jié)點(diǎn)列表和對(duì)象數(shù)組。這些集合中的每一個(gè)都有特定的用途，并具有其獨(dú)特的特征。

HTMLCollections 與 NodeLists

HTMLCollections 表示與特定標(biāo)簽名稱匹配的 HTML 元素的集合。它們由 Document 對(duì)象的 getElementsByTagName() 方法返回。 HTMLCollections 是實(shí)時(shí)，這意味著它們會(huì)自動(dòng)反映對(duì) DOM 所做的任何更改。它們還提供通過索引對(duì)各個(gè)元素的直接訪問。另一方面，

NodeLists 是任何類型 Node 的集合（包括 HTML 元素、文本節(jié)點(diǎn)和注釋）。它們由各種 DOM 方法返回，例如 querySelectorAll() 和 childNodes()。 NodeList 是靜態(tài)，這意味著除非顯式更新，否則它們不會(huì)反映 DOM 中的更改。

jQuery 對(duì)象與 HTMLCollections 和 NodeLists

jQuery 對(duì)象與 HTMLCollections 不直接相關(guān)或節(jié)點(diǎn)列表。 jQuery 對(duì)象是封裝 DOM 選擇的 JavaScript 對(duì)象。它們提供了一個(gè)方便的界面，用于操作 DOM 元素并使用 jQuery 豐富的 API 增強(qiáng)其功能。

jQuery 選擇可以包括元素、文本節(jié)點(diǎn)或任何其他類型的 Node。與 NodeList 一樣，jQuery 選擇是靜態(tài)的。但是，可以使用 jQuery 的 $(...).live() 方法將它們轉(zhuǎn)換為實(shí)時(shí) HTMLCollections。

JavaScript 數(shù)組和集合

除了 HTMLCollections 和 NodeLists，您還可以創(chuàng)建JavaScript 中的對(duì)象數(shù)組。例如，您可以將 DOM 元素存儲(chǔ)在數(shù)組中，如下所示：

<code class="javascript">const elements = [document.getElementById("myElement1"), document.getElementById("myElement2")];</code>

JavaScript 中的數(shù)組是動(dòng)態(tài)的，不會(huì)反映對(duì) DOM 所做的更改。它們也不提供對(duì) HTMLCollections 或 jQuery 對(duì)象等特定方法的訪問。

示例和演示

以下腳本演示了這些集合類型之間的主要區(qū)別：

<code class="javascript">$(function(){
    console.log('[123,&quot;abc&quot;,321,&quot;cba&quot;]=',[123,&quot;abc&quot;,321,&quot;cba&quot;]);
    console.log('{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;}=',{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;});
    console.log('Node=',Node);
    console.log('document.links=',document.links);
    console.log('document.getElementById(&quot;myTable&quot;)=',document.getElementById(&quot;myTable&quot;));
    console.log('document.getElementsByClassName(&quot;myRow&quot;)=',document.getElementsByClassName(&quot;myRow&quot;))
    console.log('document.getElementsByTagName(&quot;td&quot;)=',document.getElementsByTagName(&quot;td&quot;));
    console.log('$(&quot;#myTable&quot;)=',$(&quot;#myTable&quot;));
    console.log('$(&quot;td&quot;)=',$(&quot;td&quot;));
});</code>

此腳本記錄以下輸出：

[123,"abc",321,"cba"]=[123, "abc", 321, "cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= undefined
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table>
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
jQuery("#myTable")= [table#myTable]
jQuery("td")= [td, td, td, td]

以上是以下是一些符合您文章內(nèi)容的英文問答類問題標(biāo)題： 更簡(jiǎn)潔的標(biāo)題： * What\'s the Difference Between HTMLCollections, NodeLists, and Arrays of Objects in the DOM? * DOM Collections: HTMLCollections, NodeLists, and Arrays - What\'s t的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！