someday有个同事提交测试结果:很多功能根本就不能用,要么点击无效,要么请求失败,各种各种。我的心里咯噔一下,这个系统已经开发了一年,而且很多客户都在用,难道都要返厂升级?(这次可是老板亲自把关,让我的老脸往哪儿搁?忐忑不安中~~)
然后就针对他反映的bug,一个一个重新测试,奇怪的是都未重现,我用的是IE8做测试,所以一直相安无事。后让他用IE浏览器的兼容模式(原IE11)去测试,bug消失了。还与高版本的浏览器不兼容? 调试之后才知道,是代码写的不严谨,直接用标签的内容与指定文本比较:
$(selector).html() == "something "
为了结构清晰,代码大都采用了缩进的方式,而不同浏览器对缩进,即空白和换行的处理方式是不同的!
IE8-, 在创建DOM树时,会忽略这些空白字符;
IE9+、FireFox、Chrome等浏览器,会把空白字符或换行作为文本节点来处理。
测试示例:
标签下若直接是文本信息,Dom 会直接将空文本节点和实际的文本生成一个节点,效果不是很明显。
故将文本包含在i标签内。遍历父容器(div)的所有子节点(childNodes)。
(还原文本: ?代表回车;+代表空格)
<div id="divTest">
<i>Hello</i>
</div>
获取子节点信息:
//子节点信息模板
var tdTmpl = "<tr><td>{0}</td><td>{1}({4})</td><td> {2}</td><td>{3}</td></tr>"
//节点类型说明
var arrNodeType = ["", "Element", "Attribute", "Text"];
var subNodes = document.getElementById('divTest').childNodes;
var v_msg = [];
for(var i = 0, len = subNodes.length; i < len; i++){
var curNode = subNodes[i],
ntype = curNode.nodeType,
nvalue = ntype == 3 ? curNode.data : curNode.innerHTML,
nvalue_rp = ShowWitheSpace(nvalue);
v_msg.push(tdTmpl.format(i+1, ntype, nvalue, nvalue_rp, arrNodeType[ntype]));
}
$("#tblNodeData tbody").html(v_msg.join(""));
IE10 下的空白字符处理:
IE7(兼容模式)的空白字符处理:
![IE7-空白字符处理](https://img-my.csdn.net/uploads/201504/10/1428665805_5125.png)
参考资料:
http://www.w3school.com.cn/xmldom/dom_mozilla_vs_ie.asp
http://w3help.org/zh-cn/causes/SD9003
http://segmentfault.com/q/1010000000398015
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM