DOM 內(nèi)の HTMLCollection、NodeList、およびオブジェクトの配列の違いを理解する

DOM を操作するときは、HTMLCollection、 NodeList とオブジェクトの配列。これらのコレクションはそれぞれ特定の目的を果たし、獨(dú)自の特性を持っています。

HTMLCollections と NodeLists

HTMLCollections は、特定のタグ名に一致する HTML 要素のコレクションを表します。これらは、Document オブジェクトの getElementsByTagName() メソッドによって返されます。 HTMLCollection は live です。つまり、DOM に加えられた変更が自動(dòng)的に反映されます。また、インデックスによる個(gè)々の要素への直接アクセスも提供します。一方、

NodeList は、任意のタイプのノード (HTML 要素、テキスト ノード、コメントを含む) のコレクションです。これらは、querySelectorAll() や childNodes() などのさまざまな DOM メソッドによって返されます。 NodeList は 靜的 です。つまり、明示的に更新しない限り、DOM の変更は反映されません。

jQuery オブジェクトと HTMLCollections および NodeList の比較

jQuery オブジェクトは HTMLCollections に直接関係しません。またはノードリスト。 jQuery オブジェクトは、DOM 選択をカプセル化する JavaScript オブジェクトです。これらは、DOM 要素を操作し、jQuery の豊富な API を使用してその機(jī)能を拡張するための便利なインターフェイスを提供します。

jQuery の選択には、要素、テキスト ノード、またはその他のタイプのノードを含めることができます。 NodeList と同様に、jQuery の選択は靜的です。ただし、jQuery の $(...).live() メソッドを使用してライブ HTMLCollection に変換できます。

JavaScript の配列とコレクション

HTMLCollection と NodeList に加えて、次のものも作成できます。 JavaScript のオブジェクトの配列。たとえば、次のように DOM 要素を配列に格納できます。

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

JavaScript の配列は動(dòng)的であり、DOM に加えられた変更は反映されません。また、HTMLCollection や jQuery オブジェクトなどの特定のメソッドへのアクセスも提供しません。

例とデモ

次のスクリプトは、これらのコレクション タイプの主な違いを示しています。

<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)容と一致する英語の Q&A 質(zhì)問のタイトルをいくつか示します。 より簡潔なタイトル: * DOM 內(nèi)の HTMLCollection、NodeList、およびオブジェクトの配列の違いは何ですか? * DOM コレクション: HTMLCollections、NodeLists、Arrays - 概要の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。