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选择器两个容易忽略的点的更多相关文章

  1. HTML5中DOM元素的querySelector/querySelectorAll的工作机制

    在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...

  2. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  3. CSS选择器比较:queryselector queryselectorall

    官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...

  4. html5 新选择器 querySelector querySelectorAll

    querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...

  5. querySelectorAll选择器的js实现

    自从标准浏览器增加了querySelector这个类JQ的方法后,选择一个元素变成了一件so easy的事情.但是某些浏览器还是不支持.使用jq库又有点太大,其实可以自己动手实现这个选择器,具体代码如 ...

  6. querySelector/querySelectorAll

    querySelector获取页面I属性D为test的元素: document.getElementById("test"); //or document.querySelecto ...

  7. (getElementBy**)与 querySelector(querySelectorAll) 的区别

    1. 通过类似于 document.getElementByTagName('div') 这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环):而通过document.qu ...

  8. 踩iviewui中Select 选择器两级联动,重置查询条件时第二级数据无法清除的坑

    小颖公司最近做的项目用的vue+iviewui+axios,在做项目的过程中,遇到一个问题: 二级联动的下拉框,第一个下拉框一直都有值,第二个下拉框是在选择了第一个下拉框之后采取调用ajax获取其值, ...

  9. Scipy的stats模块包含了多种概率分布的随机变量,随机变量分为连续和离散两种。+忽略程序中警告信息+np.newaxis解释

随机推荐

  1. “Uncaught TypeError: string is not a function”

    http://www.cnblogs.com/haitao-fan/archive/2013/11/08/3414678.html 今天在js中写了一个方法叫做search(),然后点击按钮的时候提示 ...

  2. SqlParameter类——带参数的SQL语句

    http://blog.csdn.net/woshixuye/article/details/7218770 SqlParameter 类 表示 SqlCommand 的参数,也可以是它到 DataS ...

  3. JVM总结(一):概述--JVM对象探秘

    这一节我们来讨论一下JVM对象建立过程. JVM对象探秘 对象的建立 对象的内存布局 对象的访问定位 JVM对象探秘 对象的建立 对象的建立过程   图一:对象建立过程 1.类加载检查. 当JVM检测 ...

  4. bzoj千题计划238:bzoj3668: [Noi2014]起床困难综合症

    http://www.lydsy.com/JudgeOnline/problem.php?id=3668 这..一位一位的来就好了呀 #include<cstdio> #include&l ...

  5. bzoj千题计划174:bzoj1800: [Ahoi2009]fly 飞行棋

    http://www.lydsy.com/JudgeOnline/problem.php?id=1800 圆上两条直径构成矩形的对角线 #include<cstdio> using nam ...

  6. js异步处理工作机制

    js异步处理工作机制   从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下 ...

  7. 一些js的小技巧

    这里收集了一些编码上的小技巧,大家可以学习学习. 1.浮点转整型 使用|0快速转换 var a=(12.002)|0;//12 使用~~快速转换 ~取反运算符,2=0010,~2=1101,因为第一位 ...

  8. [原]Android开发优化-Adapter优化

    ListView作为Android开发中使用频率最高的一个控件,保证ListView的流畅运行,对用户体验的提高至关重要.Adapter是ListView和数据源之间的中间人,当每条数据进入可见区时, ...

  9. matrix 矩阵(多维DP)

    题面 \(solution:\) 这一题其实就是一个非常明显的三维背包问题(但博主太弱了就10分QAQ) \(F[i][j][k]:\)表示走到\((i,j)\)这个位置并且背包容量为 \(k\) 时 ...

  10. python3操作数据库 借助pycharm快速连接并操作mysql数据库

    1.https://blog.csdn.net/qiushi_1990/article/details/78041299