IE9下childNodes属性值的错乱

 

如下代码：

<table width="100" border="1"> <tr οnclick="tt(this)"> <td>0</td> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <mce:script type="text/javascript"><!-- function tt(src) { var s=""; for(var i=0;i<src.childNodes.length;i++) s+=src.childNodes[i].innerText+","; alert(s); } // --></mce:script> 

 

通常引用表格内某单元格文本值时，直接使用src.childNodes[i].innerText，但升级到IE9后，发现src.childNodes[0].innerText是空值，src.childNodes[1].innerText才是第一个单元格的值，下标为2时空值，为3时才是第二个单元格值。

通过函数tt()发现，遍历元素后，每个单元格之间都加了一个空值，真是感到很奇怪。通常网上资料查找，有人已经给出IE9下childNodes属性值与其他情况下的区别。

以下为摘要：

 

 

childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况：

	IE6/7/8/Safari/Chrome/Opera	IE9/Firefox
childNodes(i)	支持	不支持

 

 

 

IE9、火狐使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

 

如 var curtds=src.getElementsByTagName("TD");alert(curtds[1].innerText);

 

引用资料：

 

http://archive.cnblogs.com/a/1980085/

 

http://www.poluoluo.com/jzxy/201007/90280.html