各浏览器处理空白和换行的差异

最新推荐文章于 2019-10-08 20:19:26 发布

鬼眼邪神

最新推荐文章于 2019-10-08 20:19:26 发布

阅读量449

点赞数

分类专栏：浏览器兼容

本文链接：https://blog.csdn.net/u010200222/article/details/45622697

版权

浏览器兼容专栏收录该内容

13 篇文章 0 订阅

订阅专栏

所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。重要的区别有两点：

加载 HTML 的方式
处理空白和换行的方式

本文主要讲解各浏览器处理空白和换行的方式。

IE6、7、8

忽略标签之间的空白和换行字符。

其它浏览器

对于标签之间的空白和换行字符会作为文本节点来处理。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>HTML5</title>
		<script>
			window.οnlοad=function(){
				alert(document.body.childNodes.length);
			}
		</script>
	</head>

	<body>
		<p>鬼眼邪神的博客，http://cyg7561.blog.163.com/</p>
		<p>鬼眼邪神的博客，http://cyg7561.blog.163.com/</p>
		<p>鬼眼邪神的博客，http://cyg7561.blog.163.com/</p>
	</body>
</html>

在IE6、7、8中，弹框中显示的是3。在其它浏览器中，弹框中显示的是7。

解决方法

如需忽略元素节点之间的空文本节点，需要检查节点类型。元素节点的类型是1。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>HTML5</title>
		<script>
			window.οnlοad=function(){
				var sum=0;
				for (var i=0;i<document.body.childNodes.length;i++){
					if (document.body.childNodes[i].nodeType==1){
						sum++;
					}
				}
				alert(sum);
			}
		</script>
	</head>

	<body>
		<p>鬼眼邪神的博客，<a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">http://cyg7561.blog.163.com/</a></p>
		<p>鬼眼邪神的博客，<a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">http://cyg7561.blog.163.com/</a></p>
		<p>鬼眼邪神的博客，<a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">http://cyg7561.blog.163.com/</a></p>
	</body>
</html>