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

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

---

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

반드시 사실은 아닙니다. 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);

---

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

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

---

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

---

Assuming elems is a nodeList:

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

then it can be turned into an array as follows:

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

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

참고URL : https://stackoverflow.com/questions/7459704/in-javascript-what-is-the-best-way-to-convert-a-nodelist-to-an-array