javascript 解决子节点的兼容性-前端教程-前军教程网

javascript中children和childNodes的区别

1 childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。

可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况：

IE6/7/8/Safari/Chrome/Opera IE9/Firefox

childNodes(i) 支持不支持

有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点)，最容易想到的就是firstChild 属性。

代码中第一个HTML节点前如果有换行，空格，那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

function getFirst(elem){
    for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
        return e;
    }
}

2 children：非标准属性，它返回指定元素的子元素集合。

但它只返回HTML节点,甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的getFirst函数。

这里需要注意的是children在IE中包含注释节点。

区别: childNodes会返回文本节点,children不会返回文本节点

以childNodes属性为例:

IE6-IE8版本浏览器不会返回文本节点,IE9以上版本浏览器会返回文本节点

W3C浏览器(包括火狐浏览器)会返回节点

实例1:

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//IE6-8
//alert(oUl.childNodes.length);
for(var i=0;i<oUl.childNodes.length;i++)
{
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
//alert(oUl.childNodes[i].nodeType);

if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
aaaa
bbbb
fafafsdfasd 文本节点
<span>qwerqwre 元素节点</span>
</body>
</html>

实例2:

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');

alert(oUl.children.length);
/*for(var i=0;i<oUl.children.length;i++)
{
oUl.children[i].style.background='red';
}*/
};
</script>
</head>
<body>
<ul id="ul1">
<li>
dasfd
<span>xcvb</span>
</li>
<li></li>
</ul>
aaaa
bbbb
fafafsdfasd 文本节点
<span>qwerqwre 元素节点</span>
</body>
</html>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

javascript 解决子节点的兼容性