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把换行也当成了一个节点。

　　为了测试，我们可以将那段HTML改写为：

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

　　IE的打印结果为：

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

　　非IE的打印结果为：

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

　　预想中的情况出现了，这回不论什么浏览器打印出来的都只是3个P子节点。

　　原因是找到了，但正是这个原因才让人郁闷。因为这个差异，那要写一段可读性强的HTML也不那么简单了。想想看，不换行的代码那将是多么恐怖的东西啊- -!