web-dev-qa-db-ja.com

Javascriptで、NodeListを配列に変換する最良の方法は何ですか

DOMメソッドdocument.querySelectorAll()（および他のいくつか）はNodeListを返します。

リストを操作するには、例えばforEach()を使用して、NodeListを最初にArrayに変換する必要があります。

NodeListをArrayに変換する最良の方法は何ですか？

javascriptarraysdom
69
cc young

ES6を使用すると、次のことが簡単にできます。

const spanList = [...document.querySelectorAll("span")];
49
Freezystem

ES6では、Array.from(myNodeList)を使用できます。次に、好みの配列メソッドを使用します。

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

ES6シム を使用して、古いブラウザーでもこの機能を使用できます。

トランスパイラー（バベルなど）を使用している場合、さらに2つの選択肢があります。

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 2
for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

// ALT 3
[...myNodeList].forEach((el) => {
  console.log(el);
});
57
sandstrom

sliceプロトタイプのArrayメソッドを使用して、配列に変換できます。

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

さらに、必要なのがforEachだけである場合、Arrayプロトタイプからthatを強制的に呼び出さずに呼び出すことができます。最初に配列：

var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
    console.log(el);
});

ES6では、新しいArray.from関数を配列に変換します：

Array.from(elList).forEach(function(el) {
    console.log(el);
});

現在、これは出血しているEdgeブラウザーのみにありますが、 polyfillサービスを使用 であれば、この機能に全面的にアクセスできます。

ES6トランスパイル を使用している場合は、 for..of 代わりにループ：

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}
47
Joseph Silber

変換する理由-要素コレクションに直接配列のちょうどcall関数;）

_[].forEach.call( $('a'), function( v, i) {
    // do something
});
_

$がquerySelectorAllのエイリアスであると仮定すると、もちろん

編集：ES6では、さらに短い構文[...$('a')]（Firefoxでのみ動作します。2014年5月現在）

21
c69

Javascriptのリストを操作するには、たとえばforEach（）を使用して、NodeListを配列に変換する必要があります。

それは必ずしも真実ではありません。 .forEach（）をArrayからNodeListに追加すると、正常に機能します。

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

次を実行できます。

myNodeList.forEach(function(node){...})

配列のようにNodeListを反復処理する。

これにより、どこでも.call（）よりもはるかに短くクリーンなコードが生成されます。

7
mikemaccana

forEachでなければなりませんか？単純にforループを使用して、リストを反復処理できます。

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}
7
nfechner

ES6ではvar nodeArray = Array.from(nodeList)のようなクールな方法を使用できますが、私のお気に入りは新しいスプレッド演算子です。

var nodeArray = Array(...nodeList);
2
Redu

読みやすいと思うので、次を使用します。

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});
1
braed

それはES6で私と一緒に働いた

そのようなノードリストがあると仮定しましょう

<ul>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="8:22">Flexbox video</li>
  <li data-time="3:24">Redux video</li>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="4:17">Flexbox video</li>
  <li data-time="2:17">Redux video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="9:54">Flexbox video</li>
  <li data-time="5:53">Flexbox video</li>
  <li data-time="7:32">Flexbox video</li>
  <li data-time="2:47">Redux video</li>
  <li data-time="9:17">Flexbox video</li>

</ul>


const items = Array.from(document.querySelectorAll('[data-time]'));

console.log(items);
0
Amr.Ayoub