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

最新推荐文章于 2018-06-27 15:18:59 发布

鬼眼邪神

最新推荐文章于 2018-06-27 15:18:59 发布

阅读量432

点赞数

分类专栏：浏览器兼容

本文链接：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>

鬼眼邪神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
各浏览器处理空白和换行的差异

所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。重要的区别有两点：加载 HTML 的方式处理空白和换行的方式本文主要讲解各浏览器处理空白和换行的方式。IE6、7、8忽略标签之间的空白和换行字符。其它浏览器对于标签之间的空白和换行字符会作为文本节点来处理。示例代码 HTML5 window.onload=function(
复制链接

扫一扫