您当前的位置:首页 > 网站建设笔记 >

javascript选择符API

0

众多JavaScript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素。实际上,JQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementsByTagName()。

Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询。所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点。尽管库开发人员在不知疲倦地改进这一过程的性能,但到头来都只能通过运行JavaScript代码来完成查询操作。而把这个功能变成原生API之后,解析和树查询操作可以在浏览器内部通过编译后的代码来完成,极大地改善了性能。

Selectors API Level 1的核心是两个方法:querySelector()和querySelectorAll()。在兼容的浏览器中,可以通过Document及Element类型的实例调用它们。目前已完全支持Selectors API Level 1的浏览器有IE8+、Firefox 3.5+、Safari 3.1+、Chrome和Opera 10+。

querySelector()方法

querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。请看下面的例子。

取得body元素 var body = document.querySelector("body");
取得ID为myDiv的元素 var myDiv = document.querySelector("#myDiv");
取得类为selected的第一个元素 var selected = document.querySelector(".selected");
取得类为button的第一个图像元素 var img = document.body.querySelector("img.button");

通过Document类型调用querySelector()方法时,会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySelector()方法时,只会在该元素后代元素的范围内查找匹配的元素。CSS选择符可以简单也可以复杂,视情况而定。如果传入了不被支持的选择符,querySelector()会抛出错误。

querySelectorAll()方法

querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个CSS选择符,但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。具体来说,返回的值实际上是带有所有属性和方法的NodeList,而其底层实现则类似于一组元素的快照,而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题。只要传给querySelectorAll()方法的CSS选择符有效,该方法都会返回一个NodeList对象,而不管找到多少匹配的元素。如果没有找到匹配的元素,NodeList就是空的。与querySelector()类似,能够调用querySelectorAll()方法的类型包括Document、DocumentFragment和Element。下面是几个例子。

取得某<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");

要取得返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法,比如:

var i,len,strong;
for(i=0,len=strongs.length; i<len; i++){
	strong=strongs[i];	//或者strongs.item(i)
	strong.className="important";
}

同样与querySelector()类似,如果传入了浏览器不支持的选择符或者选择符中有语法错误,querySelectorAll()会抛出错误。

matchesSelector()方法

Selectors API Level 2规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数,即CSS选择符,如果调用元素与该选择符匹配,返回true,否则返回false。看例子。

if(document.body.matchesSelector("body.page1")){
	//true
}

在取得某个元素引用的情况下,使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll()方法返回。截至2011年年中,还没有浏览器支持matchesSelector()方法,不过,也有一些实验性的实现。IE9+通过msMatchesSelector()支持该方法,Firefox 3.6+通过mozMatchesSelector()支持该方法,Safari 5+和Chrome通过webkitMatchesSelector支持该方法。因此,如果你想使用这个方法,最好是编写一个包装函数。

function matchesSelector(element,selector){
	if(element.matchesSelector){
		return element.matchesSelector(selector);
	}else if(element.msMatchesSelector){
		return element.msMatchesSelector(selector);
	}else if(element.mozMatchesSelector){
		return element.mozMatchesSelector(selector);
	}else if(element.webkitMatchesSelector){
		return element.webkitMatchesSelector(selector);
	}else{
		throw new Error("Not supported");
	}
}
if(matchesSelector(document.body, "body.page1")){
	//执行操作
}
顶部中部底部