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) |
