ホームページ >ウェブフロントエンド >jsチュートリアル >記事の内容と一致する英語の Q&A 質問のタイトルをいくつか示します。 より簡潔なタイトル: * DOM 内の HTMLCollection、NodeList、およびオブジェクトの配列の違いは何ですか? * DOM コレクション: HTMLCollections、NodeLists、Arrays - 概要
DOM を操作するときは、HTMLCollection、 NodeList とオブジェクトの配列。これらのコレクションはそれぞれ特定の目的を果たし、独自の特性を持っています。
HTMLCollections は、特定のタグ名に一致する HTML 要素のコレクションを表します。これらは、Document オブジェクトの getElementsByTagName() メソッドによって返されます。 HTMLCollection は live です。つまり、DOM に加えられた変更が自動的に反映されます。また、インデックスによる個々の要素への直接アクセスも提供します。一方、
NodeList は、任意のタイプのノード (HTML 要素、テキスト ノード、コメントを含む) のコレクションです。これらは、querySelectorAll() や childNodes() などのさまざまな DOM メソッドによって返されます。 NodeList は 静的 です。つまり、明示的に更新しない限り、DOM の変更は反映されません。
jQuery オブジェクトは HTMLCollections に直接関係しません。またはノードリスト。 jQuery オブジェクトは、DOM 選択をカプセル化する JavaScript オブジェクトです。これらは、DOM 要素を操作し、jQuery の豊富な API を使用してその機能を拡張するための便利なインターフェイスを提供します。
jQuery の選択には、要素、テキスト ノード、またはその他のタイプのノードを含めることができます。 NodeList と同様に、jQuery の選択は静的です。ただし、jQuery の $(...).live() メソッドを使用してライブ HTMLCollection に変換できます。
HTMLCollection と NodeList に加えて、次のものも作成できます。 JavaScript のオブジェクトの配列。たとえば、次のように DOM 要素を配列に格納できます。
<code class="javascript">const elements = [document.getElementById("myElement1"), document.getElementById("myElement2")];</code>
JavaScript の配列は動的であり、DOM に加えられた変更は反映されません。また、HTMLCollection や jQuery オブジェクトなどの特定のメソッドへのアクセスも提供しません。
次のスクリプトは、これらのコレクション タイプの主な違いを示しています。
<code class="javascript">$(function(){ console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]); console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"}); console.log('Node=',Node); console.log('document.links=',document.links); console.log('document.getElementById("myTable")=',document.getElementById("myTable")); console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")) console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")); console.log('$("#myTable")=',$("#myTable")); console.log('$("td")=',$("td")); });</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]
以上が記事の内容と一致する英語の Q&A 質問のタイトルをいくつか示します。 より簡潔なタイトル: * DOM 内の HTMLCollection、NodeList、およびオブジェクトの配列の違いは何ですか? * DOM コレクション: HTMLCollections、NodeLists、Arrays - 概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。