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来实现一下升序，完美；

..]