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");
网友评论