javascript高级选择器querySelector和querySelectorAll
2016-04-06 15:37
239 查看
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 在规范中定义了如下接口:
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。
获取页面I属性D为test的元素:
获取页面class属性为”red”的元素:
ps:
但需要注意的是返回的nodeList集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下例:
通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。
querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身
目前几乎主流浏览器均支持了他们。包括 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的元素:
document.getElementById("test"); document.querySelector("#test"); 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>
1 //首先选取页面中id为container的元素 2 container=document.getElementById('#container'); 3 console.log(container.childNodes.length)//结果为2 4 //然后通过代码为其添加一个子元素 5 container.appendChild(document.createElement('div')); 6 //这个元素不但添加到页面了,这里的变量container也自动更新了 7 console.log(container.childNodes.length)//结果为3
通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别:
<divid="test1"><ahref="http://www.hujuntao.com/">设计蜂巢</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.hujuntao.com/">设计蜂巢</a> console.log(obj2.length)//1 console.log(obj3)//null </script>
querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身
相关文章推荐
- ext js 知识点
- js cookie 设置
- 原生js制作日历控件实例分享
- Mock.js:前后端分离开发工具
- [Gulp Workflow] 在提交代码前使用jslint进行代码检查
- js解析json字符串数组
- js判断对象的类型的四种方式
- js循环中延迟几秒执行下一段代码
- Json学习篇
- js控制一个按钮是否可点击(可使用)disabled
- three.js学习笔记 射线
- json跨域
- JSON 使用 转换为对象
- js执行顺序问题
- 【笔记】 《js权威指南》- 第14章 Window对象 14.5 - 14.6
- js判断浏览器类型
- JS实现超时跳转页面
- JS---创建自己的“JavaScript库”,原来如此简单
- js灵活打印web页面区域内容的通用方法
- javascript:void(0)和javascript:;的用法