DOM 操作における HTMLCollection、NodeList、およびオブジェクト配列の違いは何ですか?-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-29 01:51:02

オリジナル

829 人が閲覧しました

How do HTMLCollections, NodeLists, and Object Arrays Differ in DOM Manipulation?

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

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

HTMLCollections と NodeLists

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

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

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

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

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

配列とオブジェクト配列

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

ノードの選択

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

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 サイトの他の関連記事を参照してください。