javascript -- (浅谈querySelector和querySelectorAll)

标签：

W3规范：

　　querySelector:

return the first matching Element node within the node‘s subtress. if there is no such node, the method must return null.

返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null.

　　querySelectorAll:

return a NodeList containing all of the matching Element nodes within the node‘s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList

返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优化预查找；如果没有匹配的，这个方法返回空集合

简单理解：

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

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

语法：

document.querySelector(css, selector);

参数值：

css: String(类型)  描述：不可省略,指定一个或多个匹配元素的css选择器。可以使用他们的id、类、类型、属性、属性值等来选取元素。　　　　对于多个选择器，使用逗号隔开，返回一个匹配的元素

eg: 获取文档中的第一个<p>元素：

document.querySelector(‘p‘);

获取文档中class = "box"的第一个元素：

document.querySelector(‘.box‘);

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

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

/***多个选择器的使用方法**/

<span>hello</span>

<h2>world</h2>

document.querySelector(‘span,h2‘).style.color = ‘blue‘;

javascript -- (浅谈querySelector和querySelectorAll)

标签：

原文地址：http://www.cnblogs.com/zhao12354/p/5800914.html