源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-05-09 03:52 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript高级选择器querySelector和querySelectorAll全面解析
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 [b]querySelector 和 querySelectorAll 在规范中定义了如下接口:[/b]
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')
[b]ps:[/b]  但需要注意的是返回的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="http://www.1sucai.cn/">编程素材网</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="http://www.1sucai.cn/">编程素材网</a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</SPAN> 
[b] querySelectorAll [/b]在文档内找全部符合选择器描述的节点包括Element本身 [b]jQuery(element).find(selector) [/b]在文档内找全部符合选择器描述的节点不包括Element本身 以上这篇javascript高级选择器querySelector和querySelectorAll全面解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部