IE与FireFox中的childNodes区别
2011-10-20 00:13
459 查看
Javascript中,相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构,建议在需要进行了遍历时首先使用childNodes!!
但是不幸的是,在IE和FireFox中childNodes有点细微的差别:
复制代码 代码如下:
<head> <script type="text/javascript">
function view(){
var childs1=$('FirstDiv').childNodes;
var childs2=$('SecondDiv').childNodes;
alert("length of FirstDiv: "+childs1.length+"--length of SecondDiv: "+childs2.length);
}
var $=function(id)
{ return document.getElementById(id); }
</script>
</head>
<html >
<body onload="view();">
<!--第一个遍历对象,节点之间留有空格和回车-->
<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>
</html>
用IE和Firefox运行会有两个不同的结果:IE的结果是3:3;而Firefox则是7:3。怎么会有这种情况呢?
在结构上,对象1和对象2不同的是对象1的子节点间有回车或者空格,而对象2则是一行写到尾。大家都应该想到了吧,IE是将一个完整标签作为一个节点。而 Firefox除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空格、回车、制表符)也算是一个节点了。而且这种节点也有它们自己独特的属性和值--nodeName="#text"。
在实际运用中,Firefox在遍历子节点时,在for循环里不妨加上:
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。
这样,便跳过不需要的操作,使程序运行的更有效率。
附:
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12
var node = document.documentElement.firstChild;
if(node.nodeType != Node.COMMENT_NODE)
alert("You should comment your code well!");
但是不幸的是,在IE和FireFox中childNodes有点细微的差别:
复制代码 代码如下:
<head> <script type="text/javascript">
function view(){
var childs1=$('FirstDiv').childNodes;
var childs2=$('SecondDiv').childNodes;
alert("length of FirstDiv: "+childs1.length+"--length of SecondDiv: "+childs2.length);
}
var $=function(id)
{ return document.getElementById(id); }
</script>
</head>
<html >
<body onload="view();">
<!--第一个遍历对象,节点之间留有空格和回车-->
<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>
</html>
用IE和Firefox运行会有两个不同的结果:IE的结果是3:3;而Firefox则是7:3。怎么会有这种情况呢?
在结构上,对象1和对象2不同的是对象1的子节点间有回车或者空格,而对象2则是一行写到尾。大家都应该想到了吧,IE是将一个完整标签作为一个节点。而 Firefox除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空格、回车、制表符)也算是一个节点了。而且这种节点也有它们自己独特的属性和值--nodeName="#text"。
在实际运用中,Firefox在遍历子节点时,在for循环里不妨加上:
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。
这样,便跳过不需要的操作,使程序运行的更有效率。
附:
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12
var node = document.documentElement.firstChild;
if(node.nodeType != Node.COMMENT_NODE)
alert("You should comment your code well!");
相关文章推荐
- IE与FireFox中的childNodes区别
- IE和Firefox之间的JavaScript差异
- firefox与IE对js和CSS的区别(转http://log-cd.javaeye.com/blog/548665)
- Firefox3即将发布,比IE,Opera占用内存少
- ie 和 firefox 对a标记的解析
- 颜色选择器 Color Picker,IE,Firefox,Opera,Safar
- IE与Firefox的CSS兼容大全
- 兼容IE和Firefox的设为首页和收藏的Javascript代码
- firefox和ie js兼容问题 --总结得蛮全,转载过来一下
- IE,firefox下jquery获取一组checkbox选中值的问题
- js 处理 ie和firefox window.frames 兼容问题
- IE与Firefox在处理html中Alt的区别
- window.event.keyCode兼容IE和Firefox实现js代码
- JS的IE和Firefox兼容性汇编
- Firefox和IE之间7个JavaScript的差异
- firefox与ie的javascript兼容性编程汇编【转载】
- event ie firefox 兼容性问题
- 为FireFox添加IE的方法和属性
- Iframe自适应高度兼容ie,firefox多浏览器
- iframe高度自动调整(通过IE,firefox,opera测试)