小心，querySelector前方10米有坑

int64 发布于2019-08-02 14:02 / 1258人阅读

摘要：但是，用获取到的集合却不是的。于是小伙们做起了实验，大致发现，如果对节点进行删除，那么是如果新增节点则不是。如果有新发现欢迎评论留言另一个值得注意的是关于和。从的文档上笼统来说，所有集合都可以叫做，不过需要注意如下

在写一个小组建的时候用到了document.querySelector，被小伙伴提醒说这个可能有坑，是啥呢？
先来一篇MDN的文档解解馋：戳我戳我戳我>>>>>>>NodeList

翻译一下主要部分：

对于现代浏览器来说，虽然NodeList不是Array，但是它是可枚举的，因而它可以直接使用forEach等方法；

对于一些老版本的浏览器，可以使用Array.from或者Array.prototype.forEach来转换NodeList为数组，继而使用forEach等方法；

在有些情况下，NodeList是live(实时变化的)，但有些时候不是。

``
比如，使用document.getElementById，获取该元素的childNodes，那么这个集合是live的。
但是，用document.querySelectorAll()获取到的集合却不是live的。
这个live具体指什么呢？意思是，如果你事先获取到一个集合，保存在一个变量A上。在对这个集合进行增删改等操作，如果变量A能够实时反应你的增删改操作，说明集合是live的，反之则不是。
``

这个「坑」就在于，文档也没有能够说明清楚，在用querySelector后，具体什么时候NodeList是live，什么时候NodeList不是live。

于是小伙们做起了实验，大致发现，如果对节点进行删除，那么是live；如果新增节点则不是live。

朋友们也可以自己做做实验。如果有新发现欢迎评论留言～

另一个值得注意的是：关于HTMLCollection和NodeList。
从MDN的文档上笼统来说，所有集合都可以叫做NodeList，不过需要注意如下：

GPU云服务器云服务器米有坑 querySelector 有坑勿踩小心台阶

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

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

[yii2小心肝儿]GridView - 大衣篇

摘要：最终版编号生成时间用户名性别省市搞定，在运行程序，表头改成编号用户名生成时间等，不要英文这个问题搞定了。是代表对进行什么样的格式化，默认来对其处理。分钟后，我郁闷的回来了，知道这回客户提了那些乱七八糟的需求么且听下回分解睡衣篇增删改查，数据库操作的四大法宝中最常用的就是查了，一条记录、几条记录、一大堆记录。对于yii2而言，尤其后台，GridView是最常用且好用的数据列表部件，今天...

skinner 2019-06-27 15:25 评论0 收藏0
轻松搞定后台管理--guns框架

摘要：现在开始搭建我们自己的后台管理了房屋管理后台开发在中创建数据表重新发布项目使用代码生成模块注，不要创建表名为的表。 guns框架 Guns基于SpringBoot,致力于做更简洁的后台管理系统,完美整合springmvc + shiro + mybatis-plus + beetl!Guns项目代码简洁,注释丰富,上手容易,同时Guns包含许多基础模块(用户管理,角色管理,部门管理,字...

yangrd 2019-08-15 18:12 评论0 收藏0
获取文档元素

摘要：提供了很多方式获取文档元素可以很方便的查询文档中一个或者多个元素一组元素集合有以下几种方式通过指定的元素属性通过指定的属性通过指定的标签名通过指定的名通过匹配的选择器检查对应的元素是否于参数选择器匹配一些特殊集合通过属性获取元素 DOM提供了很多方式获取文档元素, 可以很方便的查询文档中一个或者多个元素[一组元素集合], 有以下几种方式: 通过指定的元素id属性(attribute)...

moven_j 2019-08-19 14:38 评论0 收藏0
html5文件上传断点续传

摘要：最近公司要做一个上传的插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛，没做过啊。没办法，，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(ﾟдﾟlll)，没做...

tianlai 2019-08-21 10:35 评论0 收藏0