鑒於退伍後的失憶症，
開始從頭開始學，把之前的東西抓回來。
之後應該會時不時更新一些生作品過程中碰到的一些小議題的研究。

NodeList 與 Array 差異

NodeList 會經由 querySelectorAll(),childNodes 產生
HTMLCollection 會經由 getElementsByTagName(),children 產生

這兩種皆為類陣列,無法使用陣列型別的method,但仍可使用索引存取內容
兩者差異可參照補充做延伸閱讀

NodeList 為 Browser API，Array 則為 JS API
querySelectorAll(),getElementsByTagName 也為Browser API
因此其他的語言亦可使用,如Python

NodeList 並非皆是 dynamic lists
意旨當有新的DOM被加入或舊的DOM被刪除時,不見得會自動更新

Ex:
querySelectorAll 會回傳 static list(不會自動更新)
.childNodes 則會自動更新

類陣列轉成陣列的方法

為了使其兩者皆可使用Array方法,要將其轉成陣列

法1

可支援至 IE6
jsfiddle示範

    var btns = document.querySelectorAll('button');
    var btnsArr = Array.prototype.slice.call(btns);

法2

不支援IE(Edge可)
可用 Polyfills 支援至IE9

    var btns = document.querySelectorAll('button');
    var btnsArr = Array.from(btns);

法3

ES6 展開運算子
不支援IE

    var btns = document.querySelectorAll('button');
    var btnsArr = [...btns]

法4

不進行轉換成 Array
利用 for/of 達到迴圈效果

    var btns = document.querySelectorAll('button');
    for (let btn of btns) {
      console.log(btn);
    }

NodeList 與 HTMLCollection的差異

NodeList 並不限制儲存的節點型別(可儲存文字節點、屬性節點)
而 HTMLCollection只能放置 element 節點

HTMLCollection NodeList差異 (中文)

    const tpl = `
    <div class="test">
      <h6>A</h6>
      <h6>B</h6>
      <h6>C</h6>
    </div>
    `
    const test = document.querySelector('.test')
    
    // NodeList(7) [text, h6, text, h6, text, h6, text]
    console.log(tes1.childNodes); 
    
    // HTMLCollection(3) [h6, h6, h6]
    console.log(tes1.children);

資料來源:
如何將 NodeList 轉換成 Array (英)
如何將 NodeList 轉換成陣列 (中)
Looping HTMLCollection (StackOverFlow)