在ie及firefox下DOM使用问题！ - 我的文章

近几日看了一下《AJAX开发简略》，sample在ie下运行都没什么问题，但是一到firefox下面就得不到正确的结果，不知是怎么回事，在网上找了许多，也没搞清是怎么回事，也不知道所以然，于是今天下了一下firefox2.0,装了一个firebug扩展，运行sample，终于问题发现了，原来，我们一般为了美观，html文档书写得感觉明朗结构化才爽，结果正是这一问题，导致了firefox下操作dom有总题，平常我们写都是在一个标记完了后会加上回车符，但是在firefox里面，dom会将回车符当成一个node类型为3,即Text来对待，但是在ie里面，dom会把回车符忽略不计在内，所以在ie下与firefox下操作dom时，同样的语句可能得到的结果不同。

如下举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function replacecontent() {
    var table1 = document.getElementsByTagName("table")[0];
var table2 = document.getElementsByTagName("table")[1];
var kid1 = table1.firstChild.firstChild.firstChild; //定位到<td>节点
var kid2 = table2.firstChild.firstChild.firstChild; //定位到<td>节点
var repkid = kid2.firstChild; //定位到表格二<td>内含的TextNode节点
//alert(kid1.tagName);
try {
     kid1.replaceChild(repkid,kid1.firstChild);
  //kid2.replaceChild(kid1.firstChild,kid2.firstChild);
}catch(e) {
   alert(e);
}

}//end function
</script>

</head>

如果大家把这段代码存贮后在ie中运行，不会提示有错误，得到预期的结果，但是要在firefox中运行，你按替换按钮怎么按都没用，为什么呢?

我们打开fireBug，定位到第一个table元素，再看一下inspector的DOM标签，你会看到如下的结果:

大家看到了吗，当前TABLE结点的ChildNodes为3，第一个是"[Text]\n ",第二个才是"<tbody>",下面的firstChild也是"[Text]\n "同，第一个结点为什么不是<tbody>呢，我们再将html代码在DW中打开，显示隐藏符号，会发现每一行中多了一个回车符，这不正是"\n"吗！

原来firefox将回车符解释成了一个Text类型的结果，问题找到了，办法自然就有了，要么改变dom的写法控制，要么将html文档重新整理一下，去掉回车符中，我们去掉回车符再看看firebug的结果看一下:

怎么样，正是我们想要的吧！因此在使用dom时请注意不同浏览器下的问题。OK,就写到这里，给像俺这样的菜鸟一点帮助。