节点中的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。
父节点
parentNode获取该节点的父节点
window.onload=function(){
var oInput=document.getElementsByTagName("input");
for (var i=0;i
oInput[i].onclick=function(){
this.parentNode.style.display="none";
}
}
}
我的爱好
运行结果：
点击每一行对应的隐藏按钮，对应的爱好就会隐藏。
子节点
childNodes
获取该节点的子节点数组
window.onload=function(){
var oUl=document.getElementById("ul1");
console.log(oUl.childNodes.length);//7
console.log(oUl.childNodes[0].nodeType);
console.log(oUl.childNodes[1].nodeType);
for (var i=0;i
if (oUl.childNodes[i].nodeType==1){
// oUl.childNodes[i].style.background="red";
}
}
// oUl.firstChild.style.background="red";
// oUl.firstElementChild.style.background="red";
var oFirst=oUl.firstElementChild||oUl.firstChild;
oFirst.style.background="red";
}
运行结果：7
这是在谷歌浏览器运行的结果，因为在ul后面的空白节点作为它的子节点，在火狐以及其他非IE浏览器也是这样的，只有在IE浏览器ul的子节点的个数为3。当把ul、li的空白都消除后，那么ul的子节点的长度就为3，如下所示
- 111
- 222
- 333
这就是为什么在非IE浏览器中ul的子节点个数为7而不是3的原因，也就是说
childNodes存在浏览器兼容的问题。
childNodes要结合nodeType（节点类型）一起使用。
nodeType ：节点类型，返回值为数字
元素：1
属性：2
文本：3
注释：8
文档：9
for (var i=0;i
if (oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background="red";
}
}
该代码可以设置ul子节点的背景颜色为红色
firstChild
获取该节点的第一个子节点
只有在IE浏览器表示第一个子节点
firstElementChild
获取该节点的第一个子节点。在非IE浏览器中表示第一个子节点
为例解决第一个子节点的浏览器兼容问题，我们需要用到或（||）操作符
var oFirst=oUl.firstElementChild||oUl.firstChild;
oFirst.style.background="red";
该代码可以设置ul第一个子节点111的背景颜色为红色
lastChild
获取该节点的最后一个子节点
lastElementChild
获取该节点的最后一个子节点
最后一个子节点和第一个子节点一样存在兼容问题，也是以同样的方式解决