querySelector／querySelectorAll选择器两个容易忽略的点_html/css

querySelector／querySelectorAll选择器两个容易忽略的点_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:30:25

原创

1544人浏览过

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：

造点AI

夸克 · 造点AI

325

查看详情

立即学习“前端免费学习笔记（深入）”；

<div id="contani">    <div>        Tencent    </div>    <div>        Alibaba    </div></div><script>    console.log( document.querySelector('#contani div') )</script>

登录后复制

结果输出的是

Tencent

这个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

本文版权归作者和博客园所有，欢迎转载，转载请标明出处。

如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！