DOM扩展

Selectors API和HTML5

Selctor API

querySelector()

//􏽷􏳃􏰣取得类为"button"的第一个图像元素􏴀􏰮􏴪􏷡􏻩􏲩􏲪
var img = document.body.querySelector("img.button");

querySelectorAll()

var strongs = document.querySelectorAll("p strong");
var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
     strong = strongs[i]; //􏲢􏽺strongs.item(i)
    strong.className = "important";
}

querySelectorAll()得到的是数组strongs，数组元素可用 strongs[i]或者strongs.item(i)

matchesSelector()

IE 9+􏲄􏰲 通过msMatchesSelector()􏲁􏲂􏹌􏲸􏱇支持matchesSelector
Firefox 3.6+􏲄􏰲 通过mozMatchesSelector()􏲁􏲂􏹌􏲸􏱇支持matchesSelector
Safari 5+􏱈,Chrome􏲄通过􏰲webkitMatchesSelector()支持matchesSelector
􏲁􏲂􏹌􏲸􏱇
if (matchesSelector(document.body, "body.page1")){
//􏶉􏰫􏵷􏳅
}

元素遍历

元素	说明
childElementCount	返回子元素的个数
firstElementChild	指向第一个元素，firstChild的元素版
lastElementChild	指向最后一个元素，lastChild的元素版
previousElementSibling	指向前一个同辈元素，previousSibling的元素版
nextElementSibling	指向后一个同辈元素，nextSibling的元素版

HTML5

getElementsByClassName()

classList属性

classList是一个字符串，可对其删除修改

//字符串拆分成数组
var classNames = div.className.split(/\\s+/);
//\\s表示空格,回车,换行等空白符
//找到要删的类名
var pos = -1;
var i,len;
for(i=0;len=classNames.length;i++){
    if(classNames[i] =="user"){
        pos=i;
    }
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串
div.className=classNames.join(" ");

操作类名的方法
add(value)