中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

IE和FireFox处理childNodes的异同 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > 网页设计 > 浏览器研究 > IE和FireFox处理childNodes的异同

IE和FireFox处理childNodes的异同

2008-09-01    文章来源:互联网    浏览次数:

javascript中,可能会用到getElementsByTagName和childNodes来实现对节点的遍历。但是getElementsByTagName对DOM结构复杂的树遍历就明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构……

暂不比较他们的优劣,在这里我想说下的是用childNodes遍历DOM节点时,Firefox和IE的一个细微差别。

nodeName="#text",你遇到过么?
下面这里给出一个例子:

<script type="text/javascript">
function view(){
var pn1=document.getElementById("pn1");
var pn2=document.getElementById("pn2");

var childs1=pn1.childNodes;
var childs2=pn2.childNodes;

alert("length of pn1: "+childs1.length+"--length of pn2: "+childs2.length);
}
</script>
<input type="button" value="查看节点长度" onclick="view();" />

<div id="pn1"><!--第一个遍历对象,节点之间留有空格和回车-->
<div>first</div>
<div>second</div>
<div>third</div>
</div>

<div id="pn2"><!--第二个遍历对象,除注释外,节点间无空格回车--><div>first</div><div>second</div><div>third</div></div>

上面的例子有两个对象,用IE和Firefox运行会有两个不同的结果:IE的结果是3:3;而Firefox则是7:3。怎么会有这种情况呢?

在结构上,对象1和对象2不同的是对象1的子节点间有回车或者空格,而对象2则是一行写到尾。大家都应该想到了吧,IE是将一个完整标签作为一个节点。而Firefox除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空格、回车、制表符)也算是一个节点了。而且这种节点也有它们自己独特的属性和值--nodeName="#text"。

寒~ 在写html时,谁没有把标签格式化的?去了回车和空格,这样的代码怎么看嘛?想不到,我们平时认为没有问题的的地方,却在DOM遍历时产生那么多的麻烦。想不到竟然连回车也算是一个node了……

所以Firefox中,如果html按照大众化的 (其实就是各种html编辑器的默认的) 写法,用childNodes获得的子节点减1除2,那大概就是大家所需要的节点数了。(比方说只有3个html元素节点,节点间夹着有2个"#text"的节点,并且一头一尾各1个,那就是7个节点了。但是不推荐通过这样的方法获得真实的节点数,因为真实的节点数是要看html里面的层次结构。)

在实际运用中,Firefox在遍历子节点时,在for循环里不妨加上:
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。
这样,便跳过不需要的操作,使程序运行的更有效率。

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部