querySelector/querySelectorAll选择器两个容易忽略的点
jquery写得多了,原生js大API就容易忘。如果你也是这样,一起来回顾一下HTML5的类jquery选择器querySelector和querySelectorAll吧,querySelectorAll这个API有两个需要注意的点,见下文。
先看看querySelector,语法:
dom.querySelector(selectors)
dom即任意dom元素,selectors是一个css选择器字符串,什么是css选择器字符串?什么类选择器、ID选择器、元素选择器都是css选择器字符串
querySelector返回dom的子元素中第一个符合selectors选择器字符串的元素,无匹配项则返回null
example:
<div id="contani">
<div>
Tencent
</div>
<div>
Alibaba
</div>
</div>
<script>
console.log( document.querySelector('#contani div') )
</script>
结果输出的是<div>Tencent</div>这个div
querySelectorAll,语法:
dom.querySelectorAll(selectors)
和上面一样,不同的是它返回的是匹配的所有元素列表,是一个nodeList集合,而且是non-live的
example:(html结构还是和上面一样)
console.log( document.querySelectorAll('#contani div') )
结果当然是返回了两个子div
什么叫non-live?理解为不会实时更新就好了,querySelectorAll匹配的元素有变化时,它的结果也不会实时更新,这是要注意的第一点
example:
<div id="contani">
<div class="child">
Tencent
</div>
<div class="child">
Alibaba
</div>
</div>
<script>
var m = document.querySelectorAll('.child');
var n = document.getElementsByClassName('child');
console.log( 'querySelectorAll: ' + m.length )
console.log( 'getElementsByTagName: ' + n.length )
var newDiv = document.createElement('div');
newDiv.className = 'child';
contani.appendChild(newDiv);
console.log('---------append child---------')
console.log( 'querySelectorAll: ' + m.length )
console.log( 'getElementsByTagName: ' + n.length )
</script>
输出:
事实证明,js动态创建了一个class为child的div插入到contani容器中,querySelectorAll的结果集并未实时更新,而getElementsByTagName的结果集是live实时更新的。
关于querySelectorAll另外要注意的一点是:当且仅当querySelectorAll的选择器字符串是‘div div’时(如:dom.querySelectorAll(‘div div’)),它匹配的元素包括了dom,也就是说如果该dom元素和它的子元素构成了div div这种父子结构时,也会被匹配到。
example:
<div class="contani">
<div class="contani">
Qihoo
<div>Safe</div>
</div>
<div class="child">
Tencent
<div>QQ</div>
</div>
<div class="child">
Alibaba
<div>Alipay</div>
</div>
</div>
<div class="child">
Baidu
<div>Family tong</div>
</div>
<script>
console.log( document.querySelectorAll('.contani div div').length )
console.log( document.querySelector('.contani').querySelectorAll('div div').length )
console.log( document.querySelectorAll('div div').length )
</script>
console.log( document.querySelectorAll('.contani div div').length )
console.log( document.querySelector('.contani').querySelectorAll('div div').length )
这两种匹配结果看似一样,实际上是不是一样的呢?结合上文所讲,自己先想想结果是多少,然后再戳这里查看结果验证自己是否理解了本文所讲的内容吧
作者:古德God
出处:http://www.cnblogs.com/wangmeijian
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!
querySelector/querySelectorAll选择器两个容易忽略的点的更多相关文章
- HTML5中DOM元素的querySelector/querySelectorAll的工作机制
在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- CSS选择器比较:queryselector queryselectorall
官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...
- html5 新选择器 querySelector querySelectorAll
querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...
- querySelectorAll选择器的js实现
自从标准浏览器增加了querySelector这个类JQ的方法后,选择一个元素变成了一件so easy的事情.但是某些浏览器还是不支持.使用jq库又有点太大,其实可以自己动手实现这个选择器,具体代码如 ...
- querySelector/querySelectorAll
querySelector获取页面I属性D为test的元素: document.getElementById("test"); //or document.querySelecto ...
- (getElementBy**)与 querySelector(querySelectorAll) 的区别
1. 通过类似于 document.getElementByTagName('div') 这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环):而通过document.qu ...
- 踩iviewui中Select 选择器两级联动,重置查询条件时第二级数据无法清除的坑
小颖公司最近做的项目用的vue+iviewui+axios,在做项目的过程中,遇到一个问题: 二级联动的下拉框,第一个下拉框一直都有值,第二个下拉框是在选择了第一个下拉框之后采取调用ajax获取其值, ...
- Scipy的stats模块包含了多种概率分布的随机变量,随机变量分为连续和离散两种。+忽略程序中警告信息+np.newaxis解释
随机推荐
- jdk 动态代理实现对目标对象的增强
因为学习 spring框架的 AOP 所以,这里复习下动态代理,但是 spring 的底层动态代理实现是 cglib,jdk 这种呢可以引导新手入门 spring AOP 横向抽取机制 最典型的应用当 ...
- IOS 与 PHP 通信加密,使用AES 128 CBC no padding
这个网上的资料真实浩如烟海,但是真正有价值的屈指可数 自己尝试了一天多,终于还是搞定了. 再次要感谢网上的前辈么. 比如下面这个关于php和java端的实现: http://my.oschina.ne ...
- R9—R常用函数分类汇总
数据结构 一.数据管理 vector:向量 numeric:数值型向量 logical:逻辑型向量 character:字符型向量 list:列表 data.frame:数据框 c:连接为向量或列表 ...
- 第7月第18天 xcode bundle ffmpeg
1. https://zhuanlan.zhihu.com/p/24281404 2. 186 ffmpeg -i /Users/temp/Downloads/n-201402201522融资融券专 ...
- oracle开机自启,开机自动关闭防火墙,开机监听自启
1.修改oratab 2,修改rc.local 3.关闭防火墙,设置开机时清空所有规则 参考文章: 1.https://blog.csdn.net/weeknd/article/details/726 ...
- Redis常见操作命令
1.库相关 select 索引 => 选择库 dbsize => 查询当前库中Key的数量 flushdb => 清空当前库 flushall => 清空所有库(建议不要用,除 ...
- rtop:一个通过 SSH 监控远程主机的交互式工具【转】
编译自: http://www.tecmint.com/rtop-monitor-remote-linux-server-over-ssh/ rtop[1] 是一个基于 SSH 的直接的交互式远程系统 ...
- centos6.5环境通过rpm包安装mysql5.5.51数据库
centos6.5环境通过rpm包安装mysql5.5.51数据库 注意:此方法适用于单独安装数据库的需求,如果在该机器上还需要安装php环境,建议mysql通过编译或yum方式安装 1.查找已经安装 ...
- python基础-pthon
1)python 由Guido开发 2)编译(compile)型:通过编译器把代码直接生成一个可执行文件. 比如把英语书一次性翻译成中文书.语言有:c,C++等 解释型:边编译边执行.语言如:java ...
- Python_oldboy_自动化运维之路_paramiko,mysql(十二)
本节内容: paramiko mysql 1.paramiko http://www.cnblogs.com/wupeiqi/articles/5095821.html paramiko是一个模块,s ...