document和document.body的区别

深碍√TFBOYSˉ_ 2022-08-27 12:48 195阅读 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 条评论，195人围观）

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

相关阅读

相关浏览器的渲染过程及document和Document的区别

浏览器的渲染过程： 1，浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个标签都是DOM树中的一个节点，根节点就是常用的document对象。DOM树里包含

系统管理员/ 2023年06月18日 13:00/ 0 赞/ 11 阅读

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

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

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

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

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

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

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

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

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

相关 document和document.body的区别

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

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

相关 document.body、document.documentElement和window获取视窗大小的区别

来源：[http://www.ido321.com/906.html][http_www.ido321.com_906.html] 在w3school关于[window

男娘i/ 2022年08月13日 00:36/ 0 赞/ 150 阅读

相关 document.ready和onload的区别

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

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

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

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

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

相关 document.write和innerHtml的区别

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

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