NodeList 與 HTMLCollection 二三事

Dom 結構以下：

<div id="myDiv">
        <li>1.dsfs</li>
        <li>2.dsfs</li>
        <li>3.dsfs</li>
        <li>5.dsfs</li>
        <li>4.dsfs</li>
        <li>6.dsfs</li>
        <li>7.dsfs</li>
        <li>8.dsfs</li>
    </div>

1.NodeList 是 querySelectorAll 的返回結果

2.HtmlCollection 是 getElementByTagName的結果

3.不要在乎兩個數量的區別，

首先NodeList 是DOM 快照，節點數量和類型的快照，就是對節點增刪，NodeList 感受不到，可是對節點內部內容修改，是能夠感受到的，好比修改innerHTML;
HtmlCollection 是live綁定的，節點的增刪是敏感的；

4.可寫性問題

1.直接對NodeList， HtmlCollection進行賦值，是失敗的

2.元素是可讀的，是對dom節點的引用

> var ef = lis[1]
< undefined
> ef 
< <li>​2.dsfs​</li>​
> lis[1] = ef
< <li>​2.dsfs​</li>​
> Object.prototype.toString.call(ef)
< "[object HTMLLIElement]"

3.而後我就想將NodeList,或者HtmlCollection 排個序啥的，很常見的需求
既然直接修改不行，那我先存到數組

轉換事後可行,下面直接進行排序

> lis = document.querySelectorAll('li');
< (8) [li, li, li, li, li, li, li, li]
> myDiv.innerHTML = Array.from(lis).sort((a,b)=>parseInt(b.innerHTML)-parseInt(a.innerHTML)).map((item)=>item.outerHTML).join('');

完美降序排序
在用HTMlCollection來實現一下升序，完美；

..]