HTML Node list를 Array로 converting 하기

 

 

NodeList와 HTML Collection은 유사배열객체라서 배열의 모든 메소드를 사용할 수는 없다.

 

NodeList

우리가 document.querySelectorAll()로 HTML elements를 가져오면 Nodelist로 들어온다.

<ul>
    <li>apple</li>
    <li>mango</li>
    <li>blueberry</li>
</ul>

<script>
    const lis = document.querySelectorAll('li');
    console.log(lis)
    
    // Nodelist[3] [ li, li, li ]
    const arrLis = Array.from(lis);
    console.log(arrLis)
    
    // (3) [ li, li, li ]-
</script>

 

 

HTML Collection

children 속성으로 가져온 것은 유사배열객체이다. 

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
</ul>


const ul = document.querySelector('ul')
const lis = ul.children;

console.log(lis)
// HTMLCollection(3) [ li, li, li ]