NodeList to Array

✍ NodeList

document.querySelectorAll()를 통해 1개 이상의 dom 객체가 존재할 경우, 노드의 콜렉션으로 리턴됨.
NodeList는 .map, .reduce, .filter 함수 사용이 불가능 함.
이런 경우에는 NodeList를 Array 로 변환 후 작업하면 된다.

How to

• Array.prototype.slice.call($NodeList)
• Array.from($NodeList)
• [...$NodeList]

(예제소스)

const $liArr = document.querySelectorAll("li");


// Err :: VM6049:1 Uncaught TypeError: document.querySelectorAll(...).filter is not a function
liArr.filter(item => true);	


# case 1
Array.prototype.slice.call($liArr).filter(item => true);	// [li1, li2, li3, ..]

# case 2
Array.from($liArr).filter(item => true);	// [li1, li2, li3, ..]

# case 3
[...$liArr].filter(item => true);		// [li1, li2, li3, ..]

[참고] https://developer.mozilla.org/ko/docs/Web/API/NodeList