43

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

4

8 に答える 8

50

ANodeListは のコレクションです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]')]
于 2013-08-08T15:14:34.653 に答える
39

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

var nodeList = document.getElementsByTagName("div");
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}
于 2011-03-31T14:59:26.427 に答える
10

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

于 2011-03-31T14:52:56.117 に答える
9

JavaScript はアルコールのようなもので、強制することができます:

var links = document.getElementsByTagName('a');
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) {
  anchor.addEventListener('click', onClickFN, false);
});
于 2013-08-04T00:20:17.560 に答える
9

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 は配列のような構造ですが、実際には配列ではありません。ブラケット表記を使用して配列値にアクセスできます。

于 2011-03-31T14:34:34.230 に答える
7

ノード リストは、多くの場合、フィルタを使用してノード イテレータとして実装されます。つまり、長さのようなプロパティを取得すると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);
}
于 2014-08-20T10:08:35.590 に答える