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";
}