NodeList 与 Array 差异-58码农网

鑒于退伍后的失忆症，
开始从头开始学，把之前的东西抓回来。
之后应该会时不时更新一些生作品过程中碰到的一些小议题的研究。

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)