document和document.body的区别

最新推荐文章于 2024-02-01 16:06:55 发布

xiliuhu

最新推荐文章于 2024-02-01 16:06:55 发布

阅读量3k

点赞数 1

分类专栏： Javascript 文章标签： function html

本文链接：https://blog.csdn.net/xiliuhu/article/details/2876762

版权

Javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

二者的区别从html代码中看是非常明显的，document包括全部，而document.body只包括<body></body>标签中的内容；可二者在页面视图上的区别也很简单，但似乎不太引人注意！以下代码作为演示：

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        .big{width:200px;height:40px; background-color:Aqua;}
        .little{width:100px; height:20px; background-color:Blue;}
    </style>
</head>
<body>
    <div class="big" id="big">
        <div class="little" id="little"></div>
    </div>
    
    <script type="text/javascript">
        //FF,Chrome
        if(window.addEventListener){    
            document.addEventListener('click',function(e){alert('document');},false);
            document.body.addEventListener('click',function(e){alert('document.body');e.cancelBubble=true;},true);
        }
        //IE 
        else if(window.attachEvent){
            document.attachEvent('onclick', function(e){alert('document');});
            document.body.attachEvent('onclick', function(e){alert('document.body');e=e||window.event;e.cancelBubble=true;});
        }
    </script>
</body>
</html>
 
 

xiliuhu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
document和document.body的区别

二者的区别从html代码中看是非常明显的，document包括全部，而document.body只包括标签中的内容；可二者在页面视图上的区别也很简单，但似乎不太引人注意！以下代码作为演示："-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http:/
复制链接

扫一扫

专栏目录