web-dev-qa-db-ja.com

javascriptのNodeListオブジェクト

NodeListがどのようなオブジェクトであるかを誰にも教えてもらえますか。私はそれが配列のようなオブジェクトであり、ブラケット表記を介してアクセスできることを読んだ、例えばvar a = someNode.childNode[0];。ブラケット表記を介してオブジェクトのプロパティにのみアクセスでき、私が知っているように

javascriptnodelist
40
ppoliani

NodeListはDOM elementsのコレクションです。これは配列のようなものです（しかしそうではありません）。使用するには、通常のJavaScript配列に変換する必要があります。次のスニペットを使用すると、作業を完了できます。

const nodeList = document.getElementsByClassName('.yourClass'),
      nodeArray = [].slice.call(nodeList);

更新：

// newer syntax
const nodeList = Array.from(document.querySelectorAll('[selector]'))

// or
const nodeList = [...document.querySelectorAll('[selector]')]
46
brielov

NodeListはホストオブジェクトであり、ネイティブJavaScriptオブジェクトに適用される通常のルールの対象ではありません。そのため、lengthプロパティと角かっこプロパティアクセス構文を介したそのメンバーへのアクセスで構成される、ドキュメント化されたAPIに固執する必要があります。このAPIを使用して、NodeListのメンバーのスナップショットを含むArrayを作成できます。

var nodeList = document.getElementsByTagName("div");
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}
39
Tim Down

NodeListはコアJavascriptオブジェクトではなく、DOMを備えたブラウザによって提供されます。動的オブジェクトまたはライブオブジェクトへのインターフェイスを返す関数を考えてください。したがって、forEach（）は使用できませんが、実際の配列に変換してスナップショットを作成できます。

// turns nodelist into an array to enable forEach
function toArray(list) {
  var i, array = [];
  for  (i=0; i<list.length;i++) {array[i] = list[i];}
  return array;
}

詳細： http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

10
Torsten Becker

JavaScriptはアルコールに似ており、強制することができます。

var links = document.getElementsByTagName('a');
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) {
  anchor.addEventListener('click', onClickFN, false);
});
9
user1248475

NodeListsは「ライブ」です。つまり、ドキュメント構造が変更されると更新され、常に最も正確な情報で最新になります。実際には、すべてのNodeListオブジェクトは、アクセスされるたびにDOMに対して実行されるクエリです。

NodeListを反復処理する場合は常に、2番目の変数を長さで初期化してから、反復子とその変数を比較するのが最善です。

var divs = document.getElementsByTagName("div");

for (var i=0, lens=divs.length; i  <  len; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
}

NodeListは構造に似た配列ですが、実際には配列ではありません。ブラケット表記法を使用して配列値にアクセスできます。

9
Ionut Popa

ノードリストは、多くの場合、フィルター付きのノードイテレーターとして実装されます。これは、長さなどのプロパティを取得することは O（n） であり、長さを再チェックしてリストを反復処理することはO（n ^ 2）であることを意味します。

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

代わりにこれを行うことをお勧めします：

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
   doSomething(paragraph);
}

これは、ブール値falseとして扱われるものが配列に含まれていない限り、すべてのコレクションと配列でうまく機能します。

ChildNodesを反復処理する場合は、firstChildプロパティとnextSiblingプロパティも使用できます。

var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}
7
Sudharshan

ES2015では、Array.fromメソッドは、配列のようなオブジェクトからArrayインスタンスを作成するため、これは機能するはずです。

const divList = Array.from( document.getElementsByTagName("div") );

詳細： https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from

6
Mahmoud Felfel

概要：

NodeListオブジェクトは、ノードのコレクションを表すデータ構造です。 DOMのコンテキストでのノードは、次のものです。

  1. ドキュメント自体
  2. DOM要素（つまりHTML/SVG要素）
  3. テキスト
  4. コメント

NodeListはnot配列ですが、NodeListは反復可能ですデータ構造。これは、for..ofループを使用して値（ノード項目）をループできることを意味します。さらに、NodeListのプロトタイプにあるそれらのNiceユーティリティ関数は、それらとの作業をより便利にします。

例：

const parent = document.querySelector('.parent');
const myNodeList1 = parent.childNodes; // this property is a Nodelist
console.log(myNodeList1 instanceof NodeList);

const myNodeList2 = document.querySelectorAll('.foo'); // this method returns a Nodelist
console.log(myNodeList2 instanceof NodeList);

// looping over the items of a nodelist
for (let el of myNodeList2) {
  el.innerHTML = 'hi';
}

// getting the length of a nodeList 
console.log(myNodeList2.length);
<div class="parent">
  <div class="foo"></div>
  <div class="foo"></div>
</div>

ブラウザ（chrome）devtoolsでのNodelistの外観は次のとおりです。

enter image description here

次の表記法を使用して、NodeListの要素にアクセスできます。

 myNodelist[0]; // grabs the first item of the NodeList

あなたは単にキーを使用するオブジェクトのプロパティ値だからです。この例では、プロパティのキーは数字のゼロで、値はDOM要素でした。

0
Willem van der Veen