document和document.body的区别

深碍√TFBOYSˉ_ 2022-08-27 12:48 181阅读 0赞

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

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.  
3.  <html xmlns="http://www.w3.org/1999/xhtml">
4.  <head>
5.      <title>无标题页</title>
6.      <style type="text/css">
7.          .big\{width:200px;height:40px; background-color:Aqua;\}
8.          .little\{width:100px; height:20px; background-color:Blue;\}
9.      </style>
10. </head>
11. <body>
12.     <div class="big" id="big">
13.         <div class="little" id="little"></div>
14.     </div>
15.     
16.     <script type="text/javascript">
17.         //FF,Chrome
18.         if(window.addEventListener)\{    
19.             document.addEventListener('click',function(e)\{alert('document');\},false);
20.             document.body.addEventListener('click',function(e)\{alert('document.body');e.cancelBubble=true;\},true);
21.         \}
22.         //IE 
23.         else if(window.attachEvent)\{
24.             document.attachEvent('onclick', function(e)\{alert('document');\});
25.             document.body.attachEvent('onclick', function(e)\{alert('document.body');e=e||window.event;e.cancelBubble=true;\});
26.         \}
27.     </script>
28. </body>
29. </html>
30. 
31.

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS篇(001)-document load 和 document ready 的区别

答案：页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数问题：如果图片资源较多，加载

叁歲伎倆/ 2023年01月01日 05:49/ 0 赞/ 129 阅读

相关 window.onload和$(document).ready()的区别

window.onload和$(document).ready()的区别，如下表所示 <table> <tbody> <tr> <td> </td

梦里梦外;/ 2022年09月25日 09:27/ 0 赞/ 186 阅读

相关 document.write()和document.writeln()的区别，实现换行

<html> <head> <title>document.write</title> <script>

快来打我*/ 2022年09月19日 04:24/ 0 赞/ 147 阅读

相关 document和document.body的区别

二者的区别从html代码中看是非常明显的，document包括全部，而document.body只包括<body></body>标签中的内容；可二者在页面视图上的区别也很简单，

深碍√TFBOYSˉ_/ 2022年08月27日 12:48/ 0 赞/ 181 阅读

相关 document.ready和onload的区别

转载自:http://blog.csdn.net/zndxlxm/article/details/7404758 页面加载完成有两种事件，一是ready，表示文档结构已经加载

快来打我*/ 2022年08月09日 03:26/ 0 赞/ 177 阅读

相关 document.documentElement和document.body的区别

网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动： <div id="div"

╰半夏微凉°/ 2022年07月25日 15:56/ 0 赞/ 149 阅读

相关 document.write和innerHtml的区别

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重

左手的ㄟ右手/ 2022年06月06日 07:07/ 0 赞/ 193 阅读

相关 $(window).height() 和 $(document).height()的区别

$(window).height()代表了可见区域的大小相当于JS盒模型中的获取网页可视区域的高度 document.documentElement.client

向右看齐/ 2022年06月04日 09:16/ 0 赞/ 272 阅读

相关 $(document).ready和window. onload的区别

1. 执行时机 window.onload方法是在网页中所有的元素（包括元素的相关联文件）都加载到浏览器后才能执行，即JavaScript此时才可以访问网页中的任何元素。

本是古典何须时尚/ 2022年05月21日 01:57/ 0 赞/ 207 阅读

相关 "parent.document"与parent.document的区别

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

亦凉/ 2022年02月03日 06:41/ 0 赞/ 488 阅读