IE和FireFox中的childNodes区别!!
2012-11-27 16:05
197 查看
7. childNodes获取的节点
【分析说明】childNodes的下标的含义在IE和Firefox中不同,看一下下面的代码:
<ul id="main">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input
type=button
value="click me!" onclick=
"alert(document.getElementById('main').childNodes.length)">
分别用IE和Firefox运行,IE的结果是3,而Firefox则是7。Firefox使用DOM规范,"#text"表示文本(实际是无意义的空格和换行等)在Firefox里也会被解析成一个节点,在IE里只有有实际意义的文本才会解析成"#text"。
【兼容处理】
方法一,获取子节点时,可以通过node.getElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构。
方法二,在实际运用中,Firefox在遍历子节点时,不妨在for循环里加上:
这样可以跳过一些文本节点。
延伸阅读
《IE和FireFox中的childNodes 区别》 下面文章
==========================================================
【分析说明】childNodes的下标的含义在IE和Firefox中不同,看一下下面的代码:
<ul id="main">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input
type=button
value="click me!" onclick=
"alert(document.getElementById('main').childNodes.length)">
分别用IE和Firefox运行,IE的结果是3,而Firefox则是7。Firefox使用DOM规范,"#text"表示文本(实际是无意义的空格和换行等)在Firefox里也会被解析成一个节点,在IE里只有有实际意义的文本才会解析成"#text"。
【兼容处理】
方法一,获取子节点时,可以通过node.getElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构。
方法二,在实际运用中,Firefox在遍历子节点时,不妨在for循环里加上:
if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。
这样可以跳过一些文本节点。
延伸阅读
《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!"); =================================================================
.trim()
//获取 select 下拉列表框 选中的值 function test() { var tab=document.getElementById("tabMain"); var text=""; for(var i=1;i<tab.rows.length;i++) { if(tab.rows[i].cells[7].childNodes[0].options[tab.rows[i].cells[7].childNodes[0].selectedIndex].text!="默认") { text=tab.rows[i].cells[7].childNodes[0].options[tab.rows[i].cells[7].childNodes[0].selectedIndex].text; alert(text); } } }
相关文章推荐
- childNodes在IE与Firefox中的区别
- event.clientX、event.clientY在firefox与IE中的区别
- firefox与ie的在html中放onclick=&quot;func()&quot;时的func的this的区别
- IE与FireFox下js和css的区别
- javascript css在IE和Firefox中区别分析
- 整理的比较全的event对像在ie与firefox浏览器中的区别
- js下的table.insertRow ie and firefox的区别
- ie和firefox中解析回车符的区别
- firefox与ie 的javascript区别
- Firefox和IE中width的区别
- firefox与ie 的javascript区别
- Ie和firefox的Js区别
- Ajax-------IE和FIREFOX 脚本的一些区别
- IE和Firefox中Javascript和CSS的区别(轉:http://blog.csdn.net/superbeck/archive/2008/10/16/3082550.aspx)
- IE和FIREFOX在解析CSS方面的区别
- js在firefox和ie中的区别(一)
- javascript在IE和Firefox中的区别
- Struts2整合jQuery实现Ajax功能-IE与firefox的区别
- FireFox与IE开发上的一些区别
- firefox与IE对javascript和CSS的区别