2015.7.12js-11(DOM基础)

1.childNodes，获取子节点，本身就是一个数组，可以通过下标childNodes[i]来获取某个子节点。

alert(obj.childNodes.length);　　　　//高级浏览器会有空白节点的存在

//循环根据节点的nodeType类型来判断是不是元素节点
for(var i = 0, len = aElement.childNodes.length; i < len; i++){
　　if(aElement.childNodes[i].nodeType == 1){
　　　　aElement.childNode[i].style.background = "red";
　　}
}

2.首尾子节点

firstChild,firstElementChild;

lastChild,lastElementChild;

3.兄弟节点

previousSibling,previousElementSibling;

nextSibling,nextElementSibling;

//用if来判断firstChild与firstElementChild来兼容

if(obj.firstElementChild){
　　obj.firstElementChild.style.background = "red";
}else{
　　obj.firstChild.style.background = "red";
}

其他节点同理

//删除空白节点，来兼容firstChild

function cleanWhiteSpace(element){
　　for(var i = 0; i < element.chiledNodes.length; i++){
　　　　var node = element.childNodes[i];　　　　　　//循环当前的子节点
　　　　if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){　　
　　　　　　node.parentNode.removeChild();　　　　//\S匹配任何可见字符，当节点是文本节点与是！/\S/,非可见字符的时候，就删除这些节点
　　　　}
　　}
}

4.父元素parentNode

//点击当前a标签，查找a标签的父级，然后隐藏

var arrA = document.getElementsByTagName("a");
　　for(var i = 0, len = arrA.length; i < len; i++){
　　　　arrA[i].onclick = function(){
　　　　　　this.parentNode.style.display = "none"
　　　　}
　　}

5.用className选择元素

//选取class为box的li，将其变色

var aLi = document.getElementsByTagName("li");
for(var i = 0, len = aLi.length; i < len; i++){
　　if(aLi[i].className == "box"){
　　　　this.style.background = "red";
　　}
}

//封装

function getByClass(objParent,targetClass){
　　var aResult = [];
　　var aElement =objParent.getElementsByTagName("*");
　　for(var i = 0, len = aElement.length; i < len; i++){
　　　　if(aElement[i].className == targetClass){
　　　　　　aResult.push(aElement[i]);
　　　　}
　　}
　　return aResult;　　　　　　　　　　　　//返回class为box的数组
}

//调用  var aBox = getByClass(aNav,"box");　　　　　　//得到class为box的数组

for(var i = 0, len = aBox.length; i < len; i++){
　　aBox[i].style.background = "red";
}