javascript中的childNodes属性的几点思考

来源：互联网发布：面积测量仪软件下载编辑：程序博客网时间：2024/06/02 16:30

代码<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="box">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>

<div id="test"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>

<script type="text/javascript">
var x = document.getElementById("box").childNodes;
for(var i = 0; i < x.length; i++){
document.write("节点" + i + "的属性是：" + x[i].nodeType + "<br>");
}
document.write("<br><br><br>");
var y = document.getElementById("test").childNodes;
for(var i = 0; i < x.length; i++){
document.write("节点" + i + "的属性是：" + y[i].nodeType + "<br>");
}
</script>

</body>

</html>

结果

javascript

jQuery

PHP

javascript

jQuery

PHP

节点0的属性是：3
节点1的属性是：1
节点2的属性是：3
节点3的属性是：1
节点4的属性是：3
节点5的属性是：1
节点6的属性是：3

节点0的属性是：1
节点1的属性是：1
节点2的属性是：1

看代码中高亮的两段代码，内容一模一样但是排版不一样，这就导致了一个奇怪的结果（在火狐浏览器和chrome浏览器中测试）如上图结果所示。

由此可知childNodes属性的结果和排版有关。

而且childNodes属性还与浏览器的内核有关：

节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7

0 0