javascript高级选择器querySelector和querySelectorAll

实例

获取文档中 id="demo" 的第一个元素：

document.querySelector("#demo");

定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

更多 CSS 选择器，请访问我们的 CSS 选择器教程 和我们的 CSS 选择器参考手册。

 

参数值 

参数	类型	描述
CSS 选择器	String	必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。 对于多个选择器，使用逗号隔开，返回一个匹配的元素。 提示： 更多 CSS 选择器，请参阅我们的 CSS 选择器参考手册。

实例

获取文档中 class="example" 的第一个元素:

document.querySelector(".example");

 

获取文档中 class="example" 的第一个 <p> 元素:

document.querySelector("p.example");

 

获取文档中有 "target" 属性的第一个 <a> 元素：

document.querySelector("a[target]");

 

以下实例演示了多个选择器的使用方法。

假定你选择了两个选择器: <h2> 和 <h3> 元素。

以下代码将为文档的第一个 <h2> 元素添加背景颜色：

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

 

但是，如果文档中 <h3> 元素位于 <h2> 元素之前，<h3> 元素将会被设置指定的背景颜色。

<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";

 

 

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)。

获取页面ID属性为test的元素：

document.getElementById("test");
//or
document.querySelector("#test");
document.querySelectorAll("#test")[0];

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

document.getElementsByClassName('red')
//or
document.querySelector('.red')
//or
document.querySelectorAll('.red')

 

Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别：

1. <divid="test1"><ahref="http://www.hujuntao.com/">设计蜂巢</a></div>
2. <pid="bar">111</p>
3. <script>
4. var d1 = document.getElementById('test1'),
5. obj1 = d1.querySelector('div a'),
6. obj2 = d1.querySelectorAll('div a');
7. obj3 = $(d1).find('div a');
8. console.log(obj1)//<a href="http://www.hujuntao.com/">设计蜂巢</a>
9. console.log(obj2.length)//1
10. console.log(obj3)//null
11. </script>

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

你对人生迷茫吗？ 那就背起行囊，起步远行吧

 

链接： http://www.cnblogs.com/daxian2012/archive/2012/10/18/2729359.html