IE与FireFox中的childNodes区别

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!");

赞 (0)

相关推荐

  • IE与FireFox中的childNodes区别

    Javascript中,相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历.但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构,建议在需要进行了遍历时首先使用childNodes!! 但是不幸的是,在IE和FireFox中childNodes有点细微的差别: 复制代码 代码如下: <head> <script type="text/

  • ie和firefox中img对象区别的困惑

    在调试js时遇到一些恶心的问题,于是做了一个测试程序,放到网上让大家帮我测试.帖子见http://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791 下面我给出关于测试的解释: 起因源于我想做这么一个网页:用户上传一个图片后,如果图片大于500象素,则在客户端把图片缩小成500象素大小.但是不想让用户看到这个大小调整过程.于是想首先隐藏这个图片,在整个网页下载完成后,调整大小,然后再显示调整好的图像. 于是我首先设置i

  • javascript css在IE和Firefox中区别分析

    一.document.formName.item("itemName") 问题  问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • Javascript在IE和FireFox中的不同表现简析

    1.document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.elem

  • Firefox中使用outerHTML的2种解决方法

    Firefox中使用outerHTML的2种解决方法

    对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别: outerHTML最开始是属于IE的私有属性,可以查看MSDN上的说明:outerHTML Property(http://msdn.microsoft.com/en-us/library/ms534310(VS

  • 怎样才能用js生成xmldom对象，并且在firefox中也实现xml数据岛？

    一般来说,xml文件都是从外部载入的,那么我们如何只用js生成xml对象呢?下面的程序实现了这一点,只需要输入字符串形式的xml数据,就可以转换为xml对象,并且兼容firefox. 用这种方法,我们也可以在firefox中实现xml数据岛,即用xmp标签来装载xml字符串,然后调用createXml函数来生成xml.    由于firefox中不支持节点的.xml属性,所以需要给它添加该属性,使之与IE一致 复制代码 代码如下: <body> <xmp id=x1>     &l

  • 设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

    设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

    重现如下: 复制代码 代码如下: <!doctype html> <html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title> <meta charset="utf-8"> </head> <body> <iframe frameborder="1" sty

  • C字符串与C++中string的区别详解

    在C++中则把字符串封装成了一种数据类型string,可以直接声明变量并进行赋值等字符串操作.以下是C字符串和C++中string的区别:  C字符串 string对象(C++) 所需的头文件名称  <string>或<string.h> <string>或<string.h> 需要头文件 原因 为了使用字符串函数 为了使用string类 声明 方式 char name[20]; string name; 初始化方式 char name[20]="

  • C语言中const和C++中的const 区别详解

    C语言中const和C++中的const 区别详解 C++的const和C语言的#define都可以用来定义常量,二者是有区别的,const是有数据类型的常量,而宏常量没有,编译器可以对前者进行静态类型安全检查,对后者仅是字符替换,没有类型安全检查. 而C语言中的const与C++也有很大的不同,在C语言中用const修饰的变量仍是一个变量,表示这个变量是只读的,不可显示地更改,而在C++中用const修饰过后,就变成常量了.例如下面的代码: const int n=10; int a[n];

  • Firefox中beforeunload事件的实现缺陷浅析

    Firefox中beforeunload事件的实现缺陷浅析

    beforeunload 指在页面卸载前提供的最后一次JS执行的机会.如下 复制代码 代码如下: window.onbeforeunload = function() { return '您正在编辑的博客尚未保存,确定要离开此页吗?'; }; 可以使用返回值文字来提示用户.但只有Firefox中却不显示该文字. 当刷新页面时,各浏览器表现如下 IE: Chrome: Firefox12: Mozilla官方说Firefox4之前的版本可以通过事件对象的returnValue修改该值,如下 复制代

随机推荐