标准参考

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 方法，可能会因为此问题而无法在其他浏览器中达到相同的目的，如脚本执行出错，或对错误的目标对象进行了操作。

受影响的浏览器

问题分析

分析以下代码：

... <!--测试元素--><div id="a"><div>div</div><span id="b">span</span><span>span</span></div><!--脚本输出--> <pre> <script>
                //获取父元素。 var $a=document.getElementById("a"); //测试 childNodes。 var
                nodeList=$a.childNodes; var string=""; for(var
                i=0;i<nodeList.length;i++)string+=nodeList[i].nodeType; document.writeln("nodeList: "+string);
                //测试 firstChild。 document.writeln("firstChild: "+$a.firstChild.nodeType); //测试
                lastChild。 document.writeln("lastChild: "+$a.lastChild.nodeType); //获取子元素。 var
                $b=document.getElementById("b"); //测试 previousSibling。
                document.writeln("previousSibling: "+$b.previousSibling.nodeType); //测试 nextSibling。
                document.writeln("nextSibling: "+$b.nextSibling.nodeType); //显示 innerHTML。
                alert("|"+$a.innerHTML+"|"); </script> </pre> ...

注意以上代码，外层 DIV 标签内的各标签间有空格符。空格符被标记为红色。

根据规范中的描述，脚本的预计输出情况如下：

第一行输出应该是“nodeList: 3131313”，因为该元素内的节点共有 7 个：3 个元素节点穿插在 4 个文本节点之间。
第二行输出应该是“firstChild: 3”，第一个节点是文本节点。
第三行输出应该是“lastChild: 3”，最后一个节点也是文本节点。
第四行输出应该是“previousSibling: 3”。本次的目标元素（SPAN[id=b]）的前一个节点是文本节点。
第五行输出应该是“nextSibling: 3”，原因同上。

这段代码在不同的浏览器环境中的表现：

最后弹出 DIV[id=a] 元素的 innerHTML 为：

|<DIV>div</DIV><SPAN id=b>span</SPAN> <SPAN>span</SPAN>
                    |

| <div>div</div> <span id="b">span</span> <span>span</span>
                    |

对原代码中的“测试元素部分”进行改动后（将其中第二个 SPAN 更换为 DIV 元素）：

... <!--测试元素--><div id="a"><div>div</div><span id="b">span</span><div>div</div></div> ...

再次测试，各浏览器表现如下：

最后弹出 DIV[id=a] 元素的 innerHTML 为：

|<DIV>div</DIV><SPAN id=b>span</SPAN>
                    <DIV>div</DIV>|

| <div>div</div> <span id="b">span</span> <div>div</div>
                    |

可见：IE 在生成 DOM 树时，忽略了一些空白字符，从而比其他浏览器少创建了一些文本节点。这导致在使用 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法时，在 IE 和其他浏览器中得到的结果不一致。

解决方案

1. 没有必要时尽量去掉各标签之间的空白字符。

因为页面脚本多是对“元素节点”进行操作，因此只要保证各元素之间没有文本节点（即源代码中的标签之间没有空白字符——包括空格符、换行符、制表符），就能使上述各属性在各浏览器中的行为一致。如：

<div id="a"><div>div</div><span
                id="b">span</span><span>span</span></div>

另外，使用脚本创建并顺次添加的元素，他们本身就是紧密相联的，各元素之间并没有文本节点，因此这种情况也不必担心上述兼容性问题，如：

... 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 的相邻的下一个元素节点。

参见

知识库

• ...

相关问题

• ...