ノードリストとはどういう意味ですか?-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-07-04 16:56:30

オリジナル

2562 人が閲覧しました

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(&#39;parent&#39;);
parent.childNodes.length // 2
parent.appendChild(document.createElement(&#39;div&#39;));
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 サイトの他の関連記事を参照してください。