【JavaScript学习】DOM扩展：选择符API

Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。
selectors API Level 1 的核心方法是两个：

• querySelector()
• querySelectorAll()

在兼容的浏览器中，可以通过Document及Element类型的实例调用它们。

目前已完全支持Selectors API Level 1 的浏览器由IE 8+、Firefox 3.5+、Safari 3.1+、Chrome和Opera 10+。

querySelector()方法

/**
 * querySelector()
 * param：接收一个CSS选择符
 * return：返回与该模式匹配的第一个元素；若没有找到匹配的元素，返回null
 */

//取得body元素
var body = document.querySelector("body");

//取得ID名为“myDiv”元素
var div = document.querySelector("#myDiv");

//取得类为“selected”元素
var selected = document.querySelector(".selected");

//取得类为“button”的第一个图像元素
var img = document.querySelector("img.button");

querySelectorAll()方法

/**
 * querySelectorAll()
 * param：接收一个CSS选择符
 * return：返回与该模式匹配的NodeList实例；若没有找到匹配的元素，返回null
 * 实际上，返回的值是带有所有属性和方法的NodeList，而其底层实现则类似一组元素的快照，
 * 而非不断的对文档进行搜索的动态查询。这样可以避免使用NodeList对象通常会引起的大多数性能问题。
 */

//取得某<div>中所有<em>元素（类似于getElementsByTagName("em"）
var ems = document.getElementById("myDiv").querySelectorAll("em");

//取得类为“selected”的所有元素
var selecteds = document.querySelectorAll(".selected");

//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");