querySelector()
querySelector() 方法接收一个 CSS 选择符, 返回与该模式匹配的第一个元素, 如果没有找到匹配的元素, 返回 null.
- // 获得 body 元素
- var body = document.querySelector("body");
- // 获得 ID 为 "myDiv" 的元素
- var myDiv = document.querySelector('#myDiv');
- // 获得类为 "selected" 的第一个元素
- var selected = document.querySelector('.selected');
- // 获得类为 "button" 的第一个 "img" 元素
- var img = document.body.querySelector('img.button');
通过 Document 类型调用 querySelector() 方法时, 会在文档元素的范围内查找匹配的元素, 而通过 Element 类型调用 querySelector() 方法时, 只会在该元素后代元素的范围内查找匹配的元素. 接收的 CSS 选择符可以简单也可以复杂, 视情况而定, 如果传入不被支持的选择符, querySelector() 会抛出错误.
querySelectorAll()
querySelectorAll() 方法时接收的参数与 querySelector() 方法一样, 都是一个 CSS 选择符, 但是返回的是所有匹配的元素而不仅仅是一个元素. 这个方法返回的是一个 NodeList 的实例. 具体来说, 返回的值实际上是带有所有属性和方法的 NodeList, 而其底层实现则类似于一组元素的快照, 而非不断对文档进行搜索的动态查询, 这样实现可以避免使用 NodeList 对象通常会引起的大多数性能问题.
只要传给 querySelectorAll() 方法的 CSS 选择符有效, 该方法都会返回一个 NodeList 对象, 而不管找到多少匹配的元素, 如果没有找到匹配的元素, NodeList 就是空的.
和 querySelector() 类似, 能够调用 querySelectorAll() 方法的类型包括 Document,DocumentFragment 和 Element.
- // 获得 ID 为 "myDiv" 的元素中的所有的 < em > 元素.
- var ems = document.getElementById("myDiv").querySelectorAll("em");
- // 获得类为 "selected" 的所有元素
- var selecteds = document.querySelectorAll('.selected');
- // 获得类为 "button" 的第一个 "img" 元素
- var strongs = document.body.querySelector('p strong');
要取得返回的 NodeList 中的每一个元素, 可以使用 item() 方法, 也可以使用方括号语法:
- var i,len,strong;
- for(i=0,len=strongs.length;i<len;i++){
- strong = strong[i];
- strong.clssName = "important";
- }
同样与 querySelector() 类似, 如果传入了浏览器不支持的选择符中有语法错误, querySelectorAll() 会抛出错误.
matchesSelector()
matchesSelector() 方法, 方法接收一个参数, 即 CSS 选择符, 如果调用元素与该选择符匹配, 返回 true; 否则, 返回 false, 看例子.
- if(document.body.matchesSelector("body.papel")){
- //true
- }
在取得某个元素引用的情况下, 使用这个方法能够方便地检测它是否会 querySelector() 或 querySelectorAll() 方法接收一个 CSS 选择符, 返回与该模式匹配的第一个元素, 如果没有找到匹配的元素, 返回 null.
截止 2011 年年中, 还没有浏览器支持 matchesSelector() 方法; 不过, 也有一些实验性的实现. IE9 + 通过 msMatchesSelector() 支持该方法, Firefox3.6 + 通过 mozMatchesSelector() 支持该方法, Safari5 + 和 Chrome 通过 webkitMatchesSelector() 支持该方法. 因此, 如果你想使用这个方法, 最好是编写一个包装函数.
- function matchesSelector(element,selector){
- if(element.matchesSelector){
- return element.matchesSelector(selector);
- }else if(element.msMatchesSelector){
- return element.msMatchesSelector(selector);
- }else if(element.mozMatchesSelector){
- return element.mozMatchesSelector(selector);
- }else if(element.webkitMatchesSelector){
- return element.webkitMatchesSelector(selector);
- }else{
- throw new Error("Not supported");
- }
- }
- if(matchesSelector(document.body,"body.page1")){
- // 要执行的操作
- }
来源: http://www.bubuko.com/infodetail-2659513.html