选择器那些事之querySelector与querySelectorAll

querySelector 和 querySelectorAll

 

 

• 是W3C Selectors API Level 1 规范中定义的
• 作用是根据CSS选择器规范，定位文档中指定的元素
• IE8及以上版本，FF，Chrome，Safari，Opera等都支持

任何NodeList，Element的实例对象和Document DocumentFragment的实例对象都有这两个方法。

• querySelectorAll 返回的是符合条件的所有节点内容，是一个NodeList | 如果没有返回空数组
• querySelector仅返回符合条件的第一个节点内容，是一个Node | 如果没有返回null

代码举例：

<div id="header">
    <div class="container relative">
      <a class="logo absolute">
	   <img src="img/logo.png" alt="logo"/>
      </a>
    </div>
</div>

 

获取header

var document = doc;
doc.querySelector('#header');
doc.querySelectorAll('#header')[0];

 

注意：

规范规定里面的参数---选择器是针对当前文档

扩展阅读：

1、http://www.w3.org/TR/selectors-api/

2、http://www.w3help.org/zh-cn/casestudies/003