Javascript에서 NodeList를 배열로 변환하는 가장 좋은 방법은 무엇입니까?

DOM 메서드 document.querySelectorAll()(및 기타 몇 가지)는 NodeList.

예를 들어를 사용하여 목록 forEach()에서 작업 NodeList하려면 먼저를 Array.

을 변환하는 가장 좋은 방법은 무엇입니까 NodeList로는 Array?

ES6를 사용하면 간단하게 다음을 수행 할 수 있습니다.

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

ES6에서는 Array.from(myNodeList). 그런 다음 좋아하는 배열 방법을 사용하십시오.

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

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

ES6 shim 을 사용하여 이전 브라우저 에서도이 작업을 수행하십시오.

트랜스 파일러 (예 : Babel)를 사용하는 경우 두 가지 대안이 더 있습니다.

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);
});

프로토 타입 의 slice메소드를 사용하여 배열로 변환 할 수 있습니다 Array.

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

당신이 필요로하는 모든 경우 또한 forEach, 당신은 호출 할 수있는 것을 으로부터 Array먼저 배열에 강요하지 않고, 프로토 타입 :

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);
});

이것은 현재 블리딩 엣지 브라우저에서만 가능하지만 폴리 필 서비스 를 사용하는 경우 전반적 으로이 기능에 액세스 할 수 있습니다.

ES6 트랜스 파일러를 사용 하는 경우 for..of대신 루프를 사용할 수도 있습니다 .

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

왜 변환합니까? - call요소 수집에서 직접 배열의 기능;)

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

물론 $ 가 querySelectorAll 의 별칭 이라고 가정 합니다.

편집 : ES6는 더 짧은 구문을 허용합니다 [...$('a')]( 2014 년 5 월 현재 Firefox에서만 작동 ).

그래야합니까 forEach? for루프를 사용하여 목록을 반복 할 수 있습니다 .

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

2020 업데이트 : nodeList.forEach ()는 이제 공식 표준 이며 모든 현재 브라우저에서 지원됩니다.

이전 브라우저는 아래 폴리 필을 사용할 수 있습니다.

예를 들어 forEach ()를 사용하여 자바 스크립트의 목록에서 작동하려면 NodeList를 배열로 변환해야합니다.

그건 사실이 아니야. .forEach()현재 브라우저에서 작동합니다. 누락 된 경우 Array 에서 NodeList로 .forEach ()를 추가 할 수 있으며 제대로 작동합니다.

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

이제 다음을 실행할 수 있습니다.

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

배열과 마찬가지로 NodeList를 반복합니다.

이것은 모든 곳에서 .call ()보다 훨씬 짧고 깨끗한 코드를 생성합니다.

ES6는 멋진 방법을 허용 var nodeArray = Array.from(nodeList)하지만 제가 가장 좋아하는 것은 새로운 스프레드 연산자입니다.

var nodeArray = Array(...nodeList);

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);

읽기가 가장 쉽다고 생각하기 때문에 다음을 사용합니다.

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

글쎄, 이것은 나에게도 효과적입니다.

const elements = Object.values( document.querySelector(your selector here) )

Object.values()Array주어진 객체의 값을 반환 합니다. NodeListJS의 모든 것이 그렇듯이 객체입니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

하지만 IE와는 호환되지 않으므로 Array.prototype.*array_method*.call(yourNodeList)최선의 선택이라고 생각 합니다. 이것으로 당신은 당신의 모든 배열 메소드를 호출 할 수 있습니다.NodeList

elems 가 nodeList 라고 가정합니다 .

var elems = document.querySelectorAll('select option:checked');

그런 다음 다음과 같이 배열로 변환 할 수 있습니다.

var values = [].map.call(elems, function(obj) {
  return obj.value;
});

참조 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll