DOM 操作における HTMLCollection、NodeList、およびオブジェクト配列の違いは何ですか?

DOM 内の HTMLCollection、NodeList、およびオブジェクト配列の区別

DOM ノードにアクセスするとき、開発者は HTMLCollection、NodeList、およびオブジェクト配列に遭遇することがよくあります。これらのデータ構造の違いを理解することは、ドキュメント構造を効果的に操作するために重要です。

HTMLCollections と NodeLists

HTMLCollections と NodeLists はノード コレクションとしての類似点を共有していますが、明確な特性:

• コンテンツ: HTMLCollection には要素ノードのみが含まれますが、NodeList には任意のタイプのノードを保持できます。
• メソッド:すべてのコレクションに共通のメソッドに加えて、HTMLCollections は、名前で要素にアクセスするためのnamedItem メソッドを提供します。

ライブ コレクションとスナップショット コレクション

DOM コレクションは、次のいずれかです。ライブまたはスナップショット:

• ライブ: DOM に変更が加えられると、コレクションは自動的に更新されます。
• スナップショット: コレクションは固定されたままです。 DOM の変更に関係なく。

ブラウザのメソッド (getElementsByTagName など) によって返される DOM コレクションは通常ライブですが、jQuery の選択はスナップショットです。

配列とオブジェクト配列

jQuery オブジェクトはコンソール ログでは配列として表示されますが、実際にはオブジェクト配列:

• 配列: 数値インデックスを使用してアクセスされる連続コレクションです。
• オブジェクト配列: 数値プロパティと名前付きプロパティの両方を使用して要素にアクセスする配列。

ノードの選択

ドキュメント メソッドの使用:

• document.getElementsByTagName("td"): すべての td 要素の HTMLCollection を返します。
• document.getElementsByClassName("myRow"): 戻り値「myRow」クラスを持つすべての要素の NodeList。

jQuery の使用:

• $("td"): すべての td 要素を選択します。 jQuery オブジェクト、オブジェクト配列を返します。

サンプル スクリプト

提供されたスクリプトは、データ構造間の違いを示しています。

• 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): ノード タイプを表すオブジェクト配列であるグローバル Node オブジェクトをログに記録します。
• console.log('document. links=',document.links): リンクの HTMLCollection をログに記録します。
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): 単一のリンクをログに記録します
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): "myRow" クラスを持つ要素の NodeList をログに記録します。
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): すべての td 要素の HTMLCollection をログに記録します。
• console.log( '$("#myTable")=',$("#myTable")): #myTable 要素を表す jQuery オブジェクトをログに記録します。
• console.log('$("td")=', $("td")): すべての td 要素を含む jQuery オブジェクト配列をログに記録します。

以上がDOM 操作における HTMLCollection、NodeList、およびオブジェクト配列の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。