DOM扩展
对DOM的两个主要的扩展是Selectors API (选择符 API) 和HTML5。这两个扩展都源自开发社区,而将某些常见做法及API标准化一直是众望所归。
1.选择符API
Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询。
Selectors APILevel1 的核心是两个方法:querySelector()和querySelectorAll()。在兼容的浏览器中,可以通过Document及Element类型的实例调用它们。
1.1querySelector()方法
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')
1.2querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个css选择符,
但返回的是所有元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。
只要传给querySelectorAll()方法的css选择符有效,该方法都会返回一个NodeList对象,而不管找到多少匹配的元素。如果没有找到匹配的元素,NodeList就是空的。
能够调用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";
}
###1.3matchesSelector()方法
Selectors API Level2规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数,即CSS选择符,如果调用元素与该选择符匹配,返回true;否则,返回false。看例子。
if(document.body.matchesSelector("body.page1")){
//true
}
在取得某个元素引用的情况下,使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll方法返回。
function matchesSelector(element,selector){
if(element.matchesSelector){
return element,matchesSelector(selector);
} else if(element.matchesSelector){
return element,matchesSelector(selector);
} else {
throw new Error("Not supported.")
}
}
if(matchesSelector(docment.body,"body.page1")){
//执行操作
}