DOM擴(kuò)展
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()得到的是數(shù)組strongs告唆，數(shù)組元素可用 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 | 返回子元素的個數(shù) |
| firstElementChild | 指向第一個元素送膳，firstChild的元素版 |
| lastElementChild | 指向最后一個元素变屁，lastChild的元素版 |
| previousElementSibling | 指向前一個同輩元素湃望，previousSibling的元素版 |
| nextElementSibling | 指向后一個同輩元素，nextSibling的元素版 |
HTML5
getElementsByClassName()
classList屬性
classList是一個字符串丙唧，可對其刪除修改
//字符串拆分成數(shù)組
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) |
