IE与FireFox中的childNodes区别_Javascript教程-查字典教程网
IE与FireFox中的childNodes区别
IE与FireFox中的childNodes区别
发布时间:2016-12-30 来源:查字典编辑
摘要:Javascript中,相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历。但是getElem...

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类