ホームページ >ウェブフロントエンド >htmlチュートリアル >DOM の NodeList と HTMLCollection_html/css_WEB-ITnose
DOM の NodeList と HTMLCollection_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:34:051383ブラウズ
最近『Javascript 上級プログラミング』を読んでいたら、「NodeList と HTMLCollection を理解することが、DOM 全体を徹底的に理解する鍵です。」という文章を見つけたので、記事を書こうと思いました。 NodeList と HTMLCollection のブログを参照して、この分野の知識ポイントをよりよく理解して要約してください。
NodeList
NodeList はノードのコレクションです（要素やその他のノードを含むことができます）。DOM には合計 12 種類のノードがあり、nodeType を判断することでノードの種類を決定できます。
Node.childNodes と document.querySelectAll() を通じて NodeList オブジェクトを取得できます (NodeList を返すインターフェイスは多数あります。ここでは 1 つずつ列挙しません。以下同様)。NodeList オブジェクトには length 属性と item() メソッドがあり、length は取得した NodeList オブジェクト内のノードの数を表し、item() はインデックスを渡してアクセスできます。 Nodelist 要素内の対応するインデックス。
1 <body> 2 <div id="node"> 3 文本节点 4 <!-- 注释节点 --> 5 <span>node1</span> 6 <span>node2</span> 7 <span>node3</span> 8 </div> 9 </body>10 <script>11 var node = document.getElementById('node'),12 nodeLists = node.childNodes13 console.log(nodeLists.length) // 输出为914 </script>
上記のHTMLコードでは、「テキストノード」と親ノードの子ノードの間のスペース（連結テキスト）がテキストノードとしてカウントされ、その次にコメントノードとコメントノードの間のスペースがカウントされます。および要素ノード スペースを含むテキスト ノード (改行するとスペースが生成され、スペースはテキスト ノードとしてカウントされます)、要素ノード間に要素ノードと改行テキスト ノードが続き、要素ノード間には 3 つの要素ノードと 2 つのテキスト ノードが続きます。 、そして最後に、最後の要素ノードと親要素の間のスペース、合計 9 つのノードによって生成されるテキスト ノードです。
NodeList オブジェクトの主な特徴は、返されるコンテンツが動的 (ライブ) であることです。これは、上記のコードで取得したノードリストが「ポインター」に似ていることを意味します。そのため、以下のコードでは、ノードリストを取得してから、作成したspanタグをnodeに挿入すると、取得したnodeLists.lengthが10に変化していることが分かりますが、querySelectorAllインターフェースから返されるnodeListオブジェクトは特殊なオブジェクトです。そしてそれは
要素のコレクションです。
1 <body> 2 <div id="node"> 3 文本节点 4 <!-- 注释节点 --> 5 <span>node1</span> 6 <span>node2</span> 7 <span>node3</span> 8 </div> 9 </body>10 <script>11 var node = document.getElementById('node')12 var nodeLists = node.childNodes13 var queryNodes = node.querySelectorAll('span')14 node.appendChild(document.createElement('span'))15 console.log(nodeLists.length) // 输出为1016 console.log(queryNodes.length) //输出为317 </script> HTMLCollection
HTMLCollection は、NodeList とよく似ており、HTMLCollection オブジェクトの長さを表す length 属性を持ち、要素を介して要素インデックスを渡すことによってアクセスすることもできます。 。アイテム（）。当時、コレクション内の name 属性と id 属性を持つ要素を返すことができる nameItem() メソッドもありました。 HTMLDocument インターフェイスの多くのプロパティは HTMLCollection オブジェクトであり、フォーム、イメージ、リンクなどのドキュメント要素にアクセスするための便利な方法を提供します。たとえば、document.images および document.forms のプロパティは HTMLCollection オブジェクトです。
1 <body> 2 <img src="test.png" id="image1"> 3 <img src="test.png" id="image2"> 4 <img src="test.png" id="image3"> 5 <img src="test.png" id="image4"> 6 <img src="test.png" id="image5"> 7 <img src="test.png" id="image6"> 8 </body> 9 <script>10 console.log(document.images.namedItem('image1')) //<img src="test.png" id="image1">11 </script> HTMLCollection コレクションも NodeList オブジェクトと同様に動的であり、ノードまたは要素のコレクションへの参照を取得します。
HTMLCollection と NodeList のリアルタイム パフォーマンス
前述したように、それらのオブジェクトは履歴ドキュメントの状態の静的なスナップショットでさえありませんが、ドキュメントが変更されるとリアルタイムで変化する可能性があります。変更に関して言えば、これは注目に値します。通常、DOM コレクションを返すためにいくつかの DOM インターフェイスを使用する場合、これらは無視されます。
HTMLCollection と NodeList のリアルタイム性は非常に便利ですが、NodeList または HTMLCollection オブジェクトを反復したい場合、通常は現在のオブジェクトのスナップショットまたは静的コピーを生成することを選択します。この場合、現在の DOM コレクションに対していくつかの削除および挿入操作を安全に実行できます。これは、集中的な DOM 操作中に非常に役立ちます。
MDN は NodeList を Array の DOM 拡張プロトタイプに変換する方法にも言及しました (IE6/7 では危険: http://perfectionkills.com/whats-wrong-with-extending-the-dom/) ：
1 var staticLists = Array.prototype.slice.call(nodeListorHtmlCollection, 0)
結論
DOM はもともと XML を解析するために設計され、後に HTML に使用されました。 DOM はコアと HTML の 2 つの部分に分割できます。コア部分は最も基本的な XML 解析 API 命令を提供し、HTML 部分は HTML での DOM 解析用の独自の API を追加します。 NodeList インターフェイスはコアに反映され、HTMLCollection は HTML 部分に含まれます。メーカー アライアンスなどの規範的な組織の出現により、これらはさらに標準化され、NodeList オブジェクトが返されるようになります。が現れましたが、それは静的です。
この記事のアイデアの多くは、私が日常生活の中で学んだものであり、私自身の整理と理解をさらに加えたものです。その目的は、より深い知識のポイントを整理することです。記載漏れや間違いがありましたら、ご指摘ください。