欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript高级选择器querySelector和querySelectorAll全面解析

程序员文章站 2022-06-20 20:11:38
queryselector 和 queryselectorall 方法是 w3c selectors api 规范中定义的。他们的作用是根据 css 选择器规范,便捷定位文...

queryselector 和 queryselectorall 方法是 w3c selectors api 规范中定义的。他们的作用是根据 css 选择器规范,便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 ie8(含) 以上版本、 firefox、 chrome、safari、opera。

queryselector 和 queryselectorall 在规范中定义了如下接口:

module dom { [supplemental, nointerfaceobject] interface nodeselector { element queryselector(in domstring selectors); nodelist queryselectorall(in domstring selectors); }; document implements nodeselector; documentfragment implements nodeselector; element implements nodeselector; };

从接口定义可以看到document、documentfragment、element都实现了nodeselector接口。即这三种类型的元素都拥有者两个方法。queryselector和queryselectorall的参数须是符合 css selector 的字符串。不同的是queryselector返回的是一个对象,queryselectorall返回的一个集合(nodelist)。

获取页面i属性d为test的元素:

1 document.getelementbyid("test");
2 document.queryselector("#test");
3 document.queryselectorall("#test")[0];

获取页面class属性为”red”的元素:

document.getelementsbyclassname('red')
document.queryselector('.red')
document.queryselectorall('.red')

ps:

 但需要注意的是返回的nodelist集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下例:

 <div id="container">
   <div></div>
   <div></div>
 </div>
//首先选取页面中id为container的元素
container=document.getelementbyid('#container');
console.log(container.childnodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendchild(document.createelement('div'));
//这个元素不但添加到页面了,这里的变量container也自动更新了
console.log(container.childnodes.length)//结果为3

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getelementbyid返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如chrome会把空白也解析为一个子节点)。

element.queryselector和element.queryselectorall和jquery(element).find(selector)选择器的区别:

 

<span style="font-size: 15px"><divid="test1"><ahref="//www.jb51.net/"></a></div> 
<pid="bar">111</p> 
<script> 
var d1 = document.getelementbyid('test1'), 
obj1 = d1.queryselector('div a'), 
obj2 = d1.queryselectorall('div a'); 
obj3 = $(d1).find('div a'); 
console.log(obj1)//<a href="//www.jb51.net/"></a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</span> 

 queryselectorall 在文档内找全部符合选择器描述的节点包括element本身

jquery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括element本身

以上这篇javascript高级选择器queryselector和queryselectorall全面解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。