-
[Javascript] 유사배열을 배열로 바꾸기Frontend/Javascript 2022. 2. 22. 13:58
NodeList는 DOM 요소 또는 보다 구체적으로 노드의 컬렉션을 나타내는 배열과 유사한 개체다. NodeList는 배열과 비슷하지만 개체 에 대해 map(), slice(), filter()와 같은 일반적인 배열 메서드를 사용할 수 없다.
<body> <ul> <li>Hi</li> <li>Hi</li> <li>Hi</li> ... </ul> <script> const ul = document.querySelector("ul"); const lis = document.querySelectorAll("li"); console.log(lis); const ulChild = document.querySelector("ul").children; console.log(ulChild); </script> </body>
각 인자들의 프로토타입은 유사배열인 NodeList, HTMLColletion으로 나온다.
배열로 바꾸는 방법
1. Array.from()
const ulChild = document.querySelector("ul").children; const ulChildrenArr = Array.from(ul.children);
ES6에서 도입되었으며 유사 배열을 배열로 변환하는 가장 간단하고 쉬운 방법이다.
2. spread 연산자
const ulChild = document.querySelector("ul").children; const ulChildrenArr = [...ulChild];ES6에서 도입되었으며 스프레드 구문 ([...iterable])을 사용하여 배열로 변환한다.
3. Array.prototype.slice()
const ulChild = document.querySelector("ul").children; const ulChildrenArr = Array.prototype.slice.call(ulChild);Array.prototype.slice.call() 배열 프로토타입에 있는 slice 메서드를 빌려쓰고 this에는 argument를 넣는다.
참고문서
https://attacomsian.com/blog/javascript-convert-nodelist-to-array
https://www.geeksforgeeks.org/how-to-convert-a-dom-nodelist-to-an-array-using-javascript/
반응형'Frontend > Javascript' 카테고리의 다른 글
[Javascript] Object vs. Map (0) 2022.04.16 [Javascript] 고차함수(Higher-Order Function)에 대하여 (0) 2022.04.05 [Javascript] Named Export와 Default Export에 대해 알아보자 (0) 2022.04.01 [webpack] 웹팩의 개념과 활용 (1) 2022.03.04 [Javascript] 파일 업로드와 프리뷰 구현하기 (0) 2022.02.25