NodeList 与 HTMLCollection 二三事

melody_lql 发布于2019-08-22 11:09 / 3285人阅读

摘要：结构如下是的返回结果是的结果不要在意两个数量的区别，首先是快照，节点数量和类型的快照，就是对节点增删，感觉不到，但是对节点内部内容修改，是可以感觉到的，比如修改是绑定的，节点的增删是敏感的可写性问题直接对，进行赋值，是失败的元素是可读的，是

Dom 结构如下：

    
        1.dsfs
        2.dsfs
        3.dsfs
        5.dsfs
        4.dsfs
        6.dsfs
        7.dsfs
        8.dsfs

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 
< 2.dsfs
> lis[1] = ef
< 2.dsfs
> 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来实现一下升序，完美；

..]

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91863.html

与dom事件流相关的二三事

摘要：但对于整个事件流上的别的元素来说，执行顺序还会受到另外一个因素的影响。以上面的场景为例，在捕获阶段执行的事件，如果执行，则事件流终止，不会到达目标阶段，的世界则不会被执行执行结果为线上参考事件流向dom绑定事件的事件的三种方式行内绑定按钮 js内绑定 btnDom.onclick = function clickHandler() { console.log(click)...

Anleb 2019-08-23 12:54 评论0 收藏0
HTMLCollection与NodeList

摘要：唯一要注意的是返回的虽然是，但是实际上是元素集合，并且是静态的其他接口返回的和都是的。与相同的是它也是一个动态的集合，与不同的是，中保存的是一组无序的属性节点的集合。及以下版本浏览器中，注释属于算作因此会出现在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有两个方面不一样1.包含节点的类型2.使用方法 1.包含节点的类型不同(重要) (1)Nod...

msup 2019-08-01 15:41 评论0 收藏0
HTMLCollection与NodeList

摘要：唯一要注意的是返回的虽然是，但是实际上是元素集合，并且是静态的其他接口返回的和都是的。与相同的是它也是一个动态的集合，与不同的是，中保存的是一组无序的属性节点的集合。及以下版本浏览器中，注释属于算作因此会出现在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有两个方面不一样1.包含节点的类型2.使用方法 1.包含节点的类型不同(重要) (1)Nod...

yanwei 2019-08-20 10:40 评论0 收藏0
数组方法的二三事

摘要：常用的数组方法删除数组的最后一个元素，返回被删除的元素，原数组长度减。原数组发生了变化，但没有创建新的数组。将指定数组进行排序，返回排好序的数组。颠倒数组元素的顺序，返回逆序后的数组。数组，对于每一个前端人员来说是非常常见且重要的数据结构之一，也是面试常常出现的题目，掌握数组的方法能帮助我们更高效地处理问题。不过在数组的学习中，我们常常会混淆数组本身的方法和Javascript提供的...

VincentFF 2019-08-23 14:37 评论0 收藏0