HTML DOM节点在不同浏览器中的识别差异

我们来了解下HTML DOM节点在不同浏览器中的识别差异。在IE浏览器及其它浏览器下对于HTML DOM的识别并非任何情况下都是一致的，主要是IE和非IE两个阵营的表现异同。

　　如有以下这样一段代码：

<div id="test">
  <p>文字</p>
  <p>文字</p>
  <p>文字</p>
</div>

　　单从HTML结构表象来看，ID test 一共有3个P元素子节点。其实，在IE下，这种表象就是实质，而在非IE下，表象的外衣将顷刻被撕开。

　　为了看出这种区别，我们可以遍历test的子节点，并将其节点个数及节点类型都打印出来：

<script type="text/javascript">
var x = document.getElementById("test");
var xc = x.childNodes;
var xcl = xc.length;
for(var i=0;i<xcl;i++){
  document.write("nodeName = " + xc[i].nodeName + "; nodeType = " + xc[i].nodeType + "<br />");
</script>

　　IE的打印结果为：

nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1

　　非IE的打印结果为：

nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3

　　显而易见，IE的打印结果和我们所说的表象一样：有3个子节点，并且都为P元素；而非IE则表现出极大的差异：居然打印出了7个子节点，当然也包括3个P元素子节点在内，除此之外还多了4个nodeType=3的子节点，我们都知道节点类型为3的节点属于文本节点，但从那段HTML中可以看P与P之间并无其它的内容出现，那这4个文本节点是怎样凭空出现的呢？

　　在这种情况下，唯一有可能的原因就是在HTML的书写上，因为这段HTML并不是连续的书写，而是每个节点间都用回车换行了，并且正好出现了4次换行，也许非IE把换行也当成了一个节点。