DOM 内の HTMLCollection、NodeList、および Object Array の区別

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")): 単一の要素ではなく、単一の要素をログに記録します。 collection.
• 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 オブジェクト配列をログに記録します。