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