节点中的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。
父节点
parentNode 获取该节点的父节点
<script type="text/javascript">
window.οnlοad=function(){
var oInput=document.getElementsByTagName("input");
for (var i=0;i<oInput.length;i++){
oInput[i].οnclick=function(){
this.parentNode.style.display="none";
}
}
}
</script>
<body>
<p>我的爱好</p>
<ul id="ul1">
<li>爬山<input type="button" value="隐藏"></li>
<li>跑步<input type="button" value="隐藏"></li>
<li>读书<input type="button" value="隐藏"></li></ul>
</body>
运行结果：
点击每一行对应的隐藏按钮，对应的爱好就会隐藏。
childNodes
获取该节点的子节点数组
window.οnlοad=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<oUl.childNodes.length;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";
}
</script>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
运行结果：7
这是在谷歌浏览器运行的结果，因为在ul后面的空白节点作为它的子节点，在火狐以及其他非IE浏览器也是这样的，只有在IE浏览器ul的子节点的个数为3。当把ul、li的空白都消除后，那么ul的子节点的长度就为3，如下所示
<body>
<ul id="ul1"><li>111</li><li>222</li><li>333</li></ul>
</body>
这就是为什么在非IE浏览器中ul的子节点个数为7而不是3的原因，也就是说
childNodes存在浏览器兼容的问题。
childNodes要结合nodeType（节点类型）一起使用。
nodeType ：节点类型，返回值为数字
元素：1
属性：2
文本：3
注释：8
文档：9
for (var i=0;i<oUl.childNodes.length;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
获取该节点的最后一个子节点
最后一个子节点和第一个子节点一样存在兼容问题，也是以同样的方式解决
扫一扫
5073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
