标准参考
Node（节点）不仅包括元素节点，也包含文本节点、注释节点、属性节点等等，节点的类型可以使用 nodeType 来区分。
在 HTML 源代码中，位于标签之内以及标签之间的文本（包括空白字符）将被创建为文本节点。
关于 Node 的更多信息，请参考 DOM-1 Core Interface Node 及 DOM-2 Core Interface Node 中的内容。
关于 Text 的更多信息，请参考 DOM-2 Core Interface Text 中的内容。
问题描述
IE 在创建 DOM 树时，会忽略某些空白字符，因此会比其他浏览器少创建一些文本节点。反过来说，同样的一篇文档，其他浏览器将比 IE 多创建一些文本节点。
造成的影响
用户针对 IE 设计的脚本如果使用节点对象的 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法，可能会因为此问题而无法在其他浏览器中达到相同的目的，如脚本执行出错，或对错误的目标对象进行了操作。
受影响的浏览器
IE6 IE7 IE8
问题分析
分析以下代码：
...
...
注意以上代码，外层 DIV 标签内的各标签间有空格符。空格符被标记为红色。
根据规范中的描述，脚本的预计输出情况如下：
第一行输出应该是“nodeList: 3131313”，因为该元素内的节点共有 7 个：3 个元素节点穿插在 4 个文本节点之间。
第二行输出应该是“firstChild: 3”，第一个节点是文本节点。
第三行输出应该是“lastChild: 3”，最后一个节点也是文本节点。
第四行输出应该是“previousSibling: 3”。本次的目标元素（SPAN[id=b]）的前一个节点是文本节点。
第五行输出应该是“nextSibling: 3”，原因同上。
这段代码在不同的浏览器环境中的表现：
IE其他浏览器
nodeList:113133131313
firstChild:13
lastChild:33
previousSibling:13
nextSibling:33
最后弹出 DIV[id=a] 元素的 innerHTML 为：
IE
|
其他浏览器:
|
对原代码中的“测试元素部分”进行改动后（将其中第二个 SPAN 更换为 DIV 元素）：
...
...
再次测试，各浏览器表现如下：
IE6 IE7 IE8Firefox Chrome Safari Opera
nodeList:11313131313
firstChild:13
lastChild:13
previousSibling:13
nextSibling:33
最后弹出 DIV[id=a] 元素的 innerHTML 为：
IE
|
其他浏览器:
|
可见：IE 在生成 DOM 树时，忽略了一些空白字符，从而比其他浏览器少创建了一些文本节点。这导致在使用 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法时，在 IE 和其他浏览器中得到的结果不一致。
解决方案
1. 没有必要时尽量去掉各标签之间的空白字符。
因为页面脚本多是对“元素节点”进行操作，因此只要保证各元素之间没有文本节点（即源代码中的标签之间没有空白字符——包括空格符、换行符、制表符），就能使上述各属性在各浏览器中的行为一致。如：
另外，使用脚本创建并顺次添加的元素，他们本身就是紧密相联的，各元素之间并没有文本节点，因此这种情况也不必担心上述兼容性问题，如：
...
var $a=document.createElement("div");
...
var $b=document.createElement("div");
...
document.body.appendChild($a);
document.body.appendChild($b);
...
$a.nextSibling.className="foo";
...
上述代码中，'$a.nextSibling' 在所有浏览器中都将是 $b。
2. 在获取节点时做类型判断。
无法保证各元素之间没有文本节点时，则需要在针对节点的操作上添加类型判断，如：
function getPreviousElementSibling ($target) {
var $previousNode = $target.previousSibling;
while ($previousNode && $previousNode.nodeType!=1) {
$previousNode = $previousNode.previousSibling;
}
return $previousNode;
}
另外，在非IE中，还可以使用 Element Traversal Specification 草案中提到的 previousElementSibling 和 nextElementSibling 获取元素节点，例如：以 Element.nextElementSibling 取得与元素 Element 的相邻的下一个元素节点。
更多信息请查看IT技术专栏