NodeList 与 HTMLCollection 二三事

2019年9月10日 144次阅读 来源: 大熊维尼

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 的返回结果

《NodeList 与 HTMLCollection 二三事》

2.HtmlCollection 是 getElementByTagName的结果

《NodeList 与 HTMLCollection 二三事》

3.不要在意两个数量的区别，

首先NodeList 是DOM 快照，节点数量和类型的快照，就是对节点增删，NodeList 感觉不到，但是对节点内部内容修改，是可以感觉到的，比如修改innerHTML;
HtmlCollection 是live绑定的，节点的增删是敏感的；

4.可写性问题
1.直接对NodeList， HtmlCollection进行赋值，是失败的

《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 排个序啥的，很常见的需求
既然直接修改不行，那我先存到数组

《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来实现一下升序，完美；
《NodeList 与 HTMLCollection 二三事》
..]

    原文作者：大熊维尼
    原文地址: https://segmentfault.com/a/1190000011197253
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞