[转+原]dom遍历 特别需要注意的问题
———————————————————–
<head> <script type="text/javascript">
function view(){
var childs1=$(‘FirstDiv‘).childNodes;
var childs2=$(‘SecondDiv‘).childNodes;
;
$(‘result‘).innerHTML+=childs1.length;
$(‘result‘).innerHTML+=":";
$(‘result‘).innerHTML+=childs2.length;
}
在结构上,对象1和对象2不同的是对象1的子节点间有回车或者空格,而对象2则是一行写到尾。大家都应该想到了吧,IE是将一个完整标签作为一个节 点。而Firefox除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空 格、回车、制表符)也算是一个节点了。而且这种节点也有它们自己独特的属性和值--nodeName="#text"
<head> <script type="text/javascript">
function view(){
var childs1=$(‘FirstDiv‘).childNodes;
var childs2=$(‘SecondDiv‘).childNodes;
;
$(‘result‘).innerHTML+=childs1.length;
$(‘result‘).innerHTML+=":";
$(‘result‘).innerHTML+=childs2.length;
}
var $=function(id)
{ return document.getElementById(id); }
</script>
</head>
<html >
<body onload="view();">
<script language="javascript">
</script>
<!–第一个遍历对象,节点之间留有空格和回车–>
<div id="FirstDiv">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!–第二个遍历对象,除注释外,节点间无空格回车–>
<div id="SecondDiv"><div>first</div><div>second</div><div>third</div></div>
<div id="result"></div>
</html>
————————————————————
以上这段代码在firefox和ie里面输出不一样
ie输出3:3….但是ff输出7:3…..
为什么呢???
在结构上,对象1和对象2不同的是对象1的子节点间有回车或者空格,而对象2则是一行写到尾。大家都应该想到了吧,IE是将一个完整标签作为一个节 点。而Firefox除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空 格、回车、制表符)也算是一个节点了。而且这种节点也有它们自己独特的属性和值--nodeName="#text"
而且….在遍历后得到的数组中…ie的下标为0..ff的下标为1