资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/NodeList 与 HTMLCollection 二三事

NodeList 与 HTMLCollection 二三事

melody_lql / 3464人阅读

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

Dom 结构如下：

</>复制代码 
  1.     
  2.         
  3. 1.dsfs
  4.         
  5. 2.dsfs
  6.         
  7. 3.dsfs
  8.         
  9. 5.dsfs
  10.         
  11. 4.dsfs
  12.         
  13. 6.dsfs
  14.         
  15. 7.dsfs
  16.         
  17. 8.dsfs
  18.
1.NodeList 是 querySelectorAll 的返回结果

2.HtmlCollection 是 getElementByTagName的结果

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

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

4.可写性问题
</>复制代码 
  1. 1.直接对NodeList， HtmlCollection进行赋值，是失败的

</>复制代码 
  1. 2.元素是可读的，是对dom节点的引用
</>复制代码 
  1. > var ef = lis[1]
  2. < undefined
  3. > ef 
  4. < 
  5. ​2.dsfs​
    6. ​
  6. > lis[1] = ef
  7. < 
  8. ​2.dsfs​
    9. ​
  9. > Object.prototype.toString.call(ef)
  10. < "[object HTMLLIElement]"
</>复制代码 
  1. 3.然后我就想将NodeList,或者HtmlCollection 排个序啥的，很常见的需求
  2. 既然直接修改不行，那我先存到数组

</>复制代码 
  1. 转换过后可行,下面直接进行排序
</>复制代码 
  1. > lis = document.querySelectorAll("li");
  2. < (8) [li, li, li, li, li, li, li, li]
  3. > myDiv.innerHTML = Array.from(lis).sort((a,b)=>parseInt(b.innerHTML)-parseInt(a.innerHTML)).map((item)=>item.outerHTML).join("");

完美降序排序
在用HTMlCollection来实现一下升序，完美；

..]

云服务器 GPU云服务器 NodeList HTMLCollection 二三 二三四要素

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

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

相关文章

  • 与dom事件流相关的二三事

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

    Anleb 评论0 收藏0

  • HTMLCollection与NodeList

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

    msup 评论0 收藏0

  • HTMLCollection与NodeList

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

    yanwei 评论0 收藏0

  • 数组方法的二三事

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

    VincentFF 评论0 收藏0

发表评论

登陆后可评论

0条评论

melody_lql

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<