标签:
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"; }
标签:
原文地址:http://www.cnblogs.com/alantao/p/4641708.html