js实现表格中不同单元格内容的替换（不同浏览器的节点属性兼容问题）

   ------->  

效果：点击右下角单元格，左下角单元格内容被替换成和左上角相同,如上图所示。

实现方式：分别获取各个节点，并将左边节点的内容修改成左上方节点的内容。

代码：

注意的地方：

如果html部分写成如下格式，则无法得到目标的效果。

为了说明这个问题的原因，可以通过获取第一个tr的第一个子节点的类型来说明。

获取第一个tr的第一个子节点类型:

var n = document.getElementsByTagName('tr')[0].firstChild.nodeName;

alert(n);

可以看出，第一个tr的第一个子节点类型是文本类型。

修改html代码结构如下（tr和td标签之间留出若干空格）。

测试此处tr的第一个子节点类型结果如下：

依然是文本类型。

去掉tr和td之间的空格再测试则得到如下结果：

由上面的分析可以得出结论，浏览器对标签之间的空格（空白节点）是敏感的。

节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，而在IE(IE<9)版本中是忽略空白节点的。

为了做到各个浏览器的兼容，有以下两中方法：

第一种方法是改变源码的书写格式

<div id="div" ><divid="div01">这是div01</div ><divid="div02">这是div02</div ></div>

经测试，所有alert的值都是2。但是这种写法看起来很别扭，并且写起来也很麻烦。要是很多很多的代码标签也不易于维护。

第二种方法是在调用childNodes属性之前先将空格删除。下面是一个删除空格的方法：

//如果是文本节点，并且值为空，则删除该节点。
for(vari = 0; i < node.length; i++) {   
if(node[i].nodeType == 3 && /\s/.test(node[i].nodeValue)){   
     node[i].parentNode.removeChild(node[i]);             
  }}
alert(node.length);

这样也能达到同样的效果，而且html代码格式也不需要改变。

 

参考:不同浏览器中childNodes获取子节点个数 http://group.zcool.com.cn/post/ZOTE5NjQ0.html