# 淺談Nodelist

## 甚麼是NodeList?

1. NodeList 是透過`document.querySelectorAll`產生的物件集合，長得像是陣列，但本質還是物件。
2. 其特色在於，還是可以用forEach跑回圈，但是無法使用一般陣列取值、新增、刪除的方式來操作。(ex. `ary.pop()`,`ary.unshift()`,...)

<ul>
  <li class="listItem">1</li>
  <li class="listItem">2</li>
  <li class="listItem">3</li>
</ul>
<!--js as below  -->

const list=document.querySelectorAll('.listItem');
console.log(list);
// expected Output: NodeList(3)["<li/>","<li/>","<li/>"]
console.log(typeof list);
// object;

* 此時的list 是物件格式，雖然可以正常跑forEach迴圈，但如果想要使用陣列刪除資料的方式移除最後一筆資料，直接使用arry.pop()就會報錯。

list.forEach((item)=>{
console.log(item.texContent);
// expected Output: '1','2','3'
})
list.pop(); 
//Uncaught TypeError: list.pop is not a function

## 如何將NodeList轉換成Arry?

### 使用 `Array.from()`

最簡單的方式就是使用 `Array.from()`將nodeList指定到令一個新陣列上面。壞處是此種方是在某些舊瀏覽器中不支援。

const listAry=Array.from(list);
console.log(listAry);
// expected Output:Array(3) [<li class="listItem">1</li>,...]

### 使用`Array.prototype.slice.call()`
如果想要兼容新舊瀏覽器的話，可以用`Array.prototype.slice.call()`這種方式。

const listAry2=Array.prototype.slice.call(list);
console.log(listAry2);
// expected Output:Array(3) [<li class="listItem">1</li>,...]

## Reference

https://developer.mozilla.org/zh-TW/docs/Web/API/NodeList
https://codepen.io/enjoyful/pen/WNZvKBL?editors=1011
https://attacomsian.com/blog/javascript-convert-nodelist-to-array