DOM基礎
- childNodes
返回指定元素的子元素集合,在IE6-8下,只返回元素節點,在IE9和chrome下會連同文本節點一起返回,所以需要通過if判斷obj[i] == 1,來篩選元素節點。 - children
返回指定元素子元素的集合,只包括元素節點,且是一級子元素 - nodeType
返回節點類型 - parentNode
返回父節點,可以做點擊隱藏父節點 - offsetParent
返回一個指向最近的包含該元素的定位元素,比如一個元素position為absolute,使用element.offsetParent可以知道該元素相對誰定位 - firstChild和firstElementChild
用于選取改元素的第一個子元素,前者支持ie6-8,后者支持高級瀏覽器,相似的還有lastChild和lastElementChild、nextSibling和nextElementSibling(下一個兄弟元素)、previousSibling和previousElementSibling - getAttribute(屬性名稱)
獲取元素的屬性 - setAttribute(屬性名稱,屬性值)
設置屬性值 - 通過className選擇元素
var aLi = document.getElementsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
if (aLi[i].className == "tored") {
aLi[i].style.backgroundColor = "red";
}
}
封裝一個getByClass函數
function getByClass(parent, class) {
var result = [];
var aEle = parent.getElementsByTagName("*");
for (var i = 0; i < aEle.length; i++) {
if (aEle[i].className == class) {
result.push(aEle[i]);
}
}
return result;
}
- createElement() 創建一個節點
var =createLi = document.createElement("li");
- appendChild() 向當前節點的子節點末尾添加新的子節點
node.appendChild(createLi)
- insertBefore() 在當前節點某個子節點之前再插入一個子節點
node.insertBefore(createLi, 某個子節點)
- removeChild() 刪除當前節點的某個子節點
node.removeChild(某個子節點)