ホームページ  >  記事  >  ウェブフロントエンド  >  ノードリストとはどういう意味ですか?

ノードリストとはどういう意味ですか?

WBOY
WBOYオリジナル
2022-07-04 16:56:302451ブラウズ

nodelist はノード リストを意味します。これは JavaScript のオブジェクトです。順序付けられたノードのセットを保存するために使用される配列のようなオブジェクトです。nodelist オブジェクトは HTMLCollection オブジェクトとオブジェクト内の要素に似ています。インデックスを渡してアクセスできます。

ノードリストとはどういう意味ですか?

この記事の動作環境: Windows 10 システム、nodejs バージョン 12.19.0、Dell G3 コンピューター。

ノードリストの意味

NodeList は JavaScript のオブジェクトであり、順序付けされたノードのセットを保存するために使用される配列のようなオブジェクトです。

NodeList オブジェクト

NodeList オブジェクトは、ドキュメントから取得されたノードのリスト (コレクション) です。

NodeList オブジェクトは HTMLCollection オブジェクトに似ています。

一部の古いブラウザのメソッド (getElementsByClassName() など) は、HTMLCollection オブジェクトの代わりに NodeList オブジェクトを返します。

すべてのブラウザの childNodes プロパティは、NodeList オブジェクトを返します。ほとんどのブラウザの

querySelectorAll() は NodeList オブジェクトを返します。

NodeList 内の要素には、インデックス (0 から始まる) によってアクセスできます。

ノード リスト自体を更新し続けることができます。要素が削除されるか、ノード リストまたは XML ドキュメントに追加されると、リストは自動的に更新されます。

注: ノード リストでは、ノードは XML ドキュメントで指定されているのと同じ順序で返されます。

NodeList オブジェクト プロパティ

length は、ノード リスト内のノードの数を返します。

NodeList オブジェクトのメソッド

item() は、ノード リスト内の指定されたインデックス番号を持つノードを返します。

例は次のとおりです。

インスタンス 1:

var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 3

NodeList インスタンス オブジェクトは、動的コレクションまたは静的コレクションの場合があります。いわゆるダイナミック コレクションはリビング コレクションであり、DOM ツリーが関連ノードを削除または追加すると、即座に NodeList インターフェイスに反映されます。

上記のコードでは、parent.childNodes は NodeList インスタンス オブジェクトを返します。親ノードが子ノードを追加すると、オブジェクトのメンバーの数が 1 つ増加します。 Node.childNodes は動的コレクションを返します。

document.querySelectorAll メソッドは静的コレクションを返します。 DOM 内の変更は、このメソッドの戻り結果にリアルタイムでは反映されません。

NodeList インターフェイス インスタンス オブジェクトは長さ属性と数値インデックスを提供するため、数値インデックスを使用して配列のように各ノードを取得できますが、それ自体は配列ではないため、次のような配列固有のメソッドは使用できません。ポンと押すか。 [

例 2:

//HTML部分代码
//<ul><li>one</li><li>two</li><li>three</li></ul>
//JAVASCRIPT代码
var myNodeList = document.querySelector(&#39;ul&#39;).childNodes;
for(var i=0;i<myNodeList.length;i++){
    console.log(myNodeList[i]);
}
/* <li>one</li>
<li>two</li>
<li>three</li>
*/
console.log(myNodeList.length);// 3
console.log(myNodeList.item(1));//<li>two</li>

上記のコードでは、myNodeList の数値インデックス部分が for ループを通過し、3 つのインデックスに対応するメンバーが返され、長さ属性が返されます。 3 のうちの 3 が正しく返されます。

myNodeList インスタンス オブジェクトの 2 番目のメンバーには、item() メソッドを通じてアクセスします。数値インデックスは 0 からカウントを開始するため、2 番目のメンバーを取得するには、数値インデックス 1 を使用します。

すべての配列のようなオブジェクトは角括弧演算子を使用してメンバーを削除できるため、通常は item メソッドの代わりに NodeList[index] メソッドが使用されます。

推奨学習: 「nodejs ビデオ チュートリアル

以上がノードリストとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。