理解DOM 中HTMLCollections、NodeList 與物件陣列之間的差異

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

HTMLCollections 與 NodeLists

HTMLCollections 表示與特定標(biāo)籤名稱相符的 HTML 元素的集合。它們由 Document 物件的 getElementsByTagName() 方法傳回。 HTMLCollections 是即時(shí)，這意味著它們會(huì)自動(dòng)反映對(duì) DOM 所做的任何更改。它們還提供透過(guò)索引對(duì)各個(gè)元素的直接存取。另一方面，

NodeLists 是任何類型 Node 的集合（包括 HTML 元素、文字節(jié)點(diǎn)和註解）。它們由各種 DOM 方法傳回，例如 querySelectorAll() 和 childNodes()。 NodeList 是靜態(tài)，這表示除非明確更新，否則它們不會(huì)反映 DOM 中的變更。

jQuery 物件與 HTMLCollections 和 NodeLists

jQuery 物件與 HTMLCollections 不直接相關(guān)或節(jié)點(diǎn)清單。 jQuery 物件是封裝 DOM 選擇的 JavaScript 物件。它們提供了一個(gè)方便的介面，用於操作 DOM 元素並使用 jQuery 豐富的 API 增強(qiáng)其功能。

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

JavaScript 陣列和集合

除了 HTMLCollections 和 NodeLists，您還可以建立JavaScript 中的物件陣列。例如，您可以將 DOM 元素儲(chǔ)存在陣列中，如下所示：

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

JavaScript 中的陣列是動(dòng)態(tài)的，不會(huì)反映對(duì) DOM 所做的變更。它們也不提供對(duì) HTMLCollections 或 jQuery 物件等特定方法的存取。

範(fàn)例和示範(fàn)

以下腳本示範(fàn)了這些集合類型之間的主要區(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)容的英文問(wèn)答類問(wèn)題標(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)文章！