HTML/JS转换工具
Unicode编码转换
当前位置:首页 > WEB前端 > JavaScript > 

IE 在创建 DOM 树时会忽略某些空白字符

来源:IT技术网编辑:李建新发布于:2017-02-12人围观

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 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”,原因同上。
 

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

  IE 其他浏览器
nodeList: 11313 3131313
firstChild: 1 3
lastChild: 3 3
previousSibling: 1 3
nextSibling: 3 3

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

IE
|<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>
...

再次测试,各浏览器表现如下:

  IE6 IE7 IE8 Firefox Chrome Safari Opera
nodeList: 1131 3131313
firstChild: 1 3
lastChild: 1 3
previousSibling: 1 3
nextSibling: 3 3

 

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

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

织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片