前端-js基础语法-DOM

DOM的事件操作

一、JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、事件

JS是以事件驱动为核心的一门语言。

事件的三要素

事件的三要素：事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。

再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下：

事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM。

代码书写步骤如下：（重要）

（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #active{
 8             background-color: greenyellow;
 9             width: 100px;
10             height:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id='active'></div>
16     <script type="text/javascript">
17         // 获取dom
18         var odiv = document.getElementById('active');
19         //绑定事件
20         var isgreen = true;  //本次目的是点击变色且变宽然后隐藏掉，再单击变回来，故需要一个判断条件
21         odiv.onclick = function(){
22             // 驱动程序放在匿名函数里面,执行操作，要实现的效果
23             // 所有的带-的，改变标签的样式在js里都用驼峰体写，如background-color就为backgroundColor
24             if (isgreen) {
25                 odiv.style.backgroundColor = 'red';
26                 odiv.style.width = '200px';
27                 odiv.style.display = 'none';
28                 isgreen = false;    //记得变量有提升 var isgreen；
29             }else {
30                 odiv.style.backgroundColor = 'greenyellow';
31                 isgreen = true;
32             }
33         };
34     </script>
35 </body>
36 </html>

代码演练

常见事件如下：

1、获取事件源的方式（DOM节点的获取）

获取事件源的常见方式如下：

1 var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
2  
3 var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
4  
5 var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

2、绑定事件的方式

　　1、匿名函数
　　2、普通函数用的是函数名fun
　　3、行内模式用的是fun(),且对象想改变属性，不能用this

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7 </head>
 8 <body>
 9     <div id="first" class="active"></div>
10     <script type="text/javascript">
11         // DOM  Document Object Model  文档对象模型 所有的doc事件方法都在里面
12         document.write(window)  //[object Window]
13         console.log(window) //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
14 
15         // 文档
16         document.write(document) //[object HTMLDocument]
17         console.dir(document)  // #document
18 
19         // html
20         document.write(document.documentElement)  //[object HTMLHtmlElement]
21         console.log(document.documentElement) // 获取怎么html文件里的所有内容显示所有的标签，通过这个操作所有的标签
22 
23 
24         //body 获取body标签的内容
25         document.write(document.body)
26         console.log(document.body)
27 
28         // dom 操作三步走：
29         // 1、获取事件对象（就是想操作的对象）
30         // 2、绑定事件（怎么干，点击鼠标，鼠标悬浮，创建标签等等），所有的事件方法，js都已定义好，只需按需调用
31         // 3、事件驱动程序（执行的操作，如改变对象的颜色，字体等等）
32 
33         //获取dom三种方式：
34         var odiv = document.getElementById('first');  //  通过id获取单个标签
35         var odiv1 = document.getElementsByClassName('active'); // 通过 类名 获得 标签数组，所以有s(相同的类可以被多个标签引用，所以是数组，如需具体到某一个加上索引即可)
36         var odiv2 = document.getElementsByTagName('div');//通过 标签名 获得 标签数组，所以有s
37 
38 
39         // 绑定dom三种方式：
40         // 1、匿名函数
41         // 2、普通函数    用的是函数名fun
42         // 3、行内模式    用的是fun(),且对象想改变属性，不能用this
43 
44         // 1、通过匿名函数绑定，最常用
45         odiv.onclick = function(){
46             // 驱动程序
47         }
48 
49         // 2、通过先定义普通函数，先写好逻辑，再绑定
50         function add(obj){
51             obj.style.backgroundColor = 'red';
52         }
53         odiv.onmouseover = add;  // 绑定的是函数名，而不是add(),因为add()是函数执行的结果
54     </script>
55 
56      <!-- 3、行内绑定：注意对象自己改变自己的属性还是需要通过document来 -->
57     <div id="box3" onclick="fun()"></div>
58     <script type="text/javascript">
59         function fun(){
60             box3.style.backgroundColor = 'green';
61             //或
62             document.getElementById('box3').style.backgroundColor = 'green';
63         }
64     </script>
65 </body>
66 </html>

获取dom及绑定dom三种方法

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         #active{
  8             background-color: greenyellow;
  9             width: 100px;
 10             height:100px;
 11         }
 12         .box{
 13                 background-color: red;
 14                 width: 100px;
 15                 height: 100px;
 16             }
 17             .box1{
 18                 width: 200px;
 19                 height: 200px;
 20                 background-color: yellow;
 21             }
 22             .active{
 23                 background-color: red;
 24             }
 25     </style>
 26 </head>
 27 <body>
 28     <div id='active'></div>
 29     <!-- 通过id获取对象：返回单一对象 -->
 30     <script type="text/javascript">
 31         // 获取dom
 32         var odiv = document.getElementById('active');
 33         //绑定事件
 34         var isgreen = true;  //本次目的是点击变色且变宽然后隐藏掉，再单击变回来，故需要一个判断条件
 35         odiv.onclick = function(){
 36             // 驱动程序放在匿名函数里面,执行操作，要实现的效果
 37             // 所有的带-的，改变标签的样式在js里都用驼峰体写，如background-color就为backgroundColor
 38             if (isgreen) {
 39                 odiv.style.backgroundColor = 'red';
 40                 odiv.style.width = '200px';
 41                 // odiv.style.display = 'none';
 42                 isgreen = false;    //记得变量有提升 var isgreen；
 43             }else {
 44                 odiv.style.backgroundColor = 'greenyellow';
 45                 odiv.style.width = '100px';
 46                 isgreen = true;
 47             }
 48         };
 49     </script>
 50 
 51 
 52 
 53     <!-- 通过类获取对象：返回数组 -->
 54     <div class="box"></div>
 55 
 56     <div class="box1" id="box1">girl</div>
 57 
 58     <script type="text/javascript">
 59         var isNow = true;
 60         var odiv = document.getElementById('box1'); //指定事件对象
 61         // 熟练了可以不指定事件对象直接写
 62         // js里的this和面向对象的self一样，表示对象自己，即事件对象
 63         // 下面三种方式都表示指定对象
 64         document.getElementById('box1').onclick = function(){  //绑定事件
 65             console.log(document.getElementById('box1'));
 66             console.log(odiv);
 67             console.log(this);
 68 
 69             if (isNow) {
 70                 // className为类名，this.className表示对象自己的类名，即为标签指定的类名
 71                 // odiv.className = odiv.className + 'active';
 72                 // 后声明的类优先级要高active是后声明的
 73                 this.className = this.className + ' active';
 74                 isNow = false;
 75             }else {
 76                 //再次点击还原
 77                 this.className = 'box1';
 78                 isNow = true;
 79             }
 80         };
 81     </script>
 82 
 83     <!-- 通过标签获取对象，返回数组 -->
 84     <script type="text/javascript">
 85 
 86             function $(obj){
 87                 // 封装查找事件对象通用函数
 88                 return document.getElementsByTagName(obj)[0]
 89             };
 90 
 91             // 通过标签找对象
 92             var obutton = document.getElementsByTagName('button')[0];
 93             // 应用上封装函数则如下
 94             var obutton = $('button');
 95 
 96             // 改变标签内部的一些属性如 id 、class、title、style
 97             // img( src alt) a(href)  input(type name value placeholder)  from(action method)
 98             // 直接访问document.getElementsByTagName('img')[0].src等等
 99 
100             $('img').src = '../install/html/mi_picture/logo16366.gif';
101             $('img').alt = 'dada';
102             $('a').href = 'http://www.baidu.com';
103 
104             console.log($('div').innerText)
105             // 结果： 更改  隐藏     happy一下
106 
107 
108             console.log($('div').innerHTML)
109             // <button class="python">更改</button>
110             // <button class="python">隐藏</button>
111             // <input type="text" placeholder="love ">
112             // <img src="../install/html/mi_picture/logo16366.gif" alt="dada">
113             // <a href="http://www.baidu.com">happy一下</a>
114 
115             innerText 获取的是文本，添加的也是文本
116             innerHTML 获取的是所有的文本加标签，添加标签及文本
117         </script>
118 
119 </body>
120 </html>

获取dom三种方式详细演练

Dom对于值得操作

/ 改变标签内部的一些属性如 id 、class、title、style
// img( src alt) a(href) input(type name value placeholder) from(action method)
// 直接访问document.getElementsByTagName('img')[0].src等等
// innerText 获取的是文本，添加的也是文本，更改得标签内所有得内容
// innerHTML 获取的是所有的文本加标签，添加标签及文本，可向标签中直接插入一个标签，如‘<a href= 'http://www.lang.com'>百度一下</a>’

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         <img src="" alt="">
10         <button>隐藏</button>
11         <input type=""  placeholder="happy一下" value="">
12         <a href="">奋斗的岁月</a>
13     </div>
14 
15 
16     <script type="text/javascript">
17             // 改变标签内部的一些属性如 id 、class、title、style
18             // img( src alt) a(href)  input(type name value placeholder)  from(action method)
19             // 直接访问document.getElementsByTagName('img')[0].src等等
20             // innerText 获取的是文本，添加的也是文本
21             // innerHTML 获取的是所有的文本加标签，添加标签及文本
22             function $(obj){
23                 return document.getElementsByTagName(obj)[0];
24             };
25 
26             //直接操作属性
27             $('img').src = '../install/html/mi_picture/logo16366.gif';
28             $('img').alt = 'dada';
29             $('a').href = 'http://www.baidu.com';
30 
31             // 答应innerText 与innerHTML的区别
32             console.log($('div').innerText)
33             // 结果：   隐藏     happy一下  奋斗的岁月
34 
35             console.log($('div').innerHTML)
36             // 结果：
37             // <button class="python">更改</button>
38             // <button class="python">隐藏</button>
39             // <input type="text" placeholder="love ">
40             // <img src="../install/html/mi_picture/logo16366.gif" alt="dada">
41             // <a href="http://www.baidu.com">happy一下</a>
42     </script>
43 </body>
44 </html>

 innerHTML添加文本：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         <button>提交</button>
10     </div>
11     <script type="text/javascript">
12         var oDiv = document.getElementsByTagName('div')[0]
13         var oBun = document.getElementsByTagName('button')[0]
14         oBun.onclick = function(){
15             // 第一种向标签中插入内容
16         oDiv.innerHTML = '<h1>我的青年时代</h1>'
17         // 模板字符串ecm6中，反引号，插入变量名 ${name}这样内容可以变化
18         var name = 'wen';
19         var age = '30';
20         oDiv.innerHTML = `<ul>
21             <li>${name}</li>
22             <li>${age}</li>
23         </ul>`
24 
25         };
26         
27     </script>
28 </body>
29 </html>

案例1：点击按钮，关闭图片，再点击，显示图片，同时按钮得文字也跟着改变【这个小例子可扩展为导航栏上面的广告，点击X 关闭广告】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         <img src="" alt="">
10         <button>隐藏</button>
11     </div>
12     <script type="text/javascript">
13             // 需求：点击按钮，隐藏图片，，再点击，显示图片且按钮文字形成提示
14             // 这个小例子可扩展为导航栏上面的广告，点击X 关闭广告
15             var obuttons = $('button');   //获取对象,第一个按钮
16             var oimg = $('img')
17             var isShow = true;
18             obuttons.onclick = function(){
19                 if (isShow) {
20                     oimg.style.display = 'none';
21                     obuttons.innerText = '显示';  //按钮文字默认为隐藏
22                     isShow = false;  // 改变条件
23                 }else {
24                     oimg.style.display = 'block';
25                     obuttons.innerText = '隐藏';
26                     isShow = true;
27                 }
28             };
29     </script>
30 </body>
31 </html>

通过按钮操作图片得显示和隐藏

阻止默认事件发生：

常见的有a标签的自动转超链接及submit按键自动提交表单信息，故在js中如有操作需提前阻止默认事件发生，执行我们自己写的逻辑。

阻止a标签的默认事件小技巧：<a href=javascript:void(0);>
另一种方法：event.preventDefault()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>京东广告栏</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .top_banner{
13             width: 100%;
14             background-color: rgb(230,15,82);
15         }
16 
17         .container{
18             width: 1190px;   /*京东的中间盒子*/
19             margin: 0 auto;  /*盒子居中*/
20             position: relative;
21         }
22 
23         .top_banner .container .banner{
24             display: block;
25             width: 100%;
26             height: 80px;
27             background: url(http://img11.360buyimg.com/da/jfs/t23038/322/2050889343/74857/ef45186e/5b7276c9Na1fe6db5.jpg) no-repeat center 0;
28                 /*设置背景图，不平铺，居中显示*/
29         }
30 
31         .top_banner .container .close{
32             /*display: block;*/
33             position: absolute;
34             /*定位的标签就脱离标准文档流，可以设置宽高了*/
35             right: 0;
36             top:0;
37             /*上面这两个一定要加，不然就会在父块的内容后面，想浮起来左上角对其，就必须加*/
38             width: 20px;
39             height: 20px;
40             color: white;
41             text-align: center;
42             line-height: 20px;
43             text-decoration: none;
44 
45         }
46 
47         .hide{
48             display: none;   /*隐藏可以在原类的属性上加上此类即可，一个标签有多个权重相同的类，从上到下，后面的覆盖前面的*/
49         }
50 
51 
52     </style>
53 </head>
54 <body>
55     <div class='top_banner' id="top_banner">
56         <div class="container">
57             <a href="#" class="banner" id="banner"></a>
58             <a href="http://www.baidu.com" class="close" id="closeBanner">X</a>
59         </div>
60     </div>
61     <script type="text/javascript">
62         // 需求：当点击x的时候，隐藏广告栏，且不进行跳转等动作
63         var oClose = document.getElementById('closeBanner')  // 获取事件对象
64         oClose.onclick = function(event){
65             event.preventDefault();  // 阻止当前标签的默认事件，非常重要！！！！
66             document.getElementById('top_banner').className += ' hide';  // 字符串拼接
67             // 注意‘ hide’里hide前需要加一个空格，不然加到标签中和其它的类字符串写在一起了会失效
68 
69             // 点击x后，跳转到其它动作了如其它网页，这是不对的，需求阻止这个自动事件
70             document.getElementById('top_banner').style.display = 'none';
71         }
72     </script>
73 </body>
74 </html>

电商广告栏关闭案例

DOM（Document Object Model）中各节点事件对象的分布：

// DOM 文档对象模型所有的dom事件方法都在里面
　　document.write(window) //[object Window]
　　console.log(window) //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

// 文档
　　document.write(document) //[object HTMLDocument]
　　console.dir(document) // #document

// html
　　document.write(document.documentElement) //[object HTMLHtmlElement]
　　console.log(document.documentElement) // 获取html文件里的所有内容显示所有的标签，通过这个操作所有的标签，除了一行没有<!doctype html>表示dom文档；

//body 获取body标签的内容
　　document.write(document.body)
　　console.log(document.body)

入口函数

理论基础：js的加载是和html同步加载的

window窗口包括：bom + dom

window加载顺序： html加载完成，生成dom树
　　　　　　即先文档加载dom，再图片加载，都加载完成表示窗口加载完成；

场景：

　　为了统一将js放在一起，div放在一起，结构分明，这就导致js可能放在div前面。

作用：

　　解决元素在定义之前使用，即script在div写，不加的话因从上到下执行找不到而报错。同时保证整个页面所有元素即标签加载完毕后再执行js内容。

使用方法：

将使用元素的代码放在onload里面
　　　　<script>
　　　　　　window.onload = function(){
　　　　　　　　　　后面的function就是回调函数

　　　　　　　　　　js代码……
　　　　　　}
　　　　</script>

缺点：
1、覆盖现象，如果文档中不小心写了多个windwow.onload，后面的会覆盖前面的。

2、window.onload必须等窗口加载完成后才能执行里面的方法，如果网上差，图片等需要很久才能加载完成的原因，导致需要一直等待图片加载完成才能执行window.onload的代码，体验会非常差，解决方案就是加载dom即加载html里的所有标签，图片不管，这样体验就很好了，框架里都是这样做的。
　　　　document.onload = function(){
　　　　　　　　所有操作对象的操作都放在这里，就不会发生找不到对象的error了，就不会因js放在对象前面而无法执行，返回undefined
　　　　}

BOM对象【浏览器】

实例：锚点值的跳转

知识：window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

location对象的属性 https://blog.csdn.net/luofeng457/article/details/70214101

href：跳转
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议一般是http、https
search 查询字符串

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>锚点值跳转</title>
 6 </head>
 7 <body>
 8     <!-- history  hash -->
 9     <a href="#/login">登录</a>
10     <a href="#/register">注册</a>
11     <div id="app"></div>
12 
13     <script>
14          //锚点值的跳转，bom中的location事件
15 
16         window.onhashchange = function () {
17             console.log(location.hash);
18             var oDiv = document.getElementById('app');
19             switch (location.hash) {
20                 case '#/login':
21                     //未来要与后端进行的交互的代码
22                     oDiv.innerHTML = '<h2>我是登录页面</h2>'
23                     break;
24                 case '#/register':
25                     oDiv.innerHTML = '<h2>我是注册页面</h2>'
26                     break;
27                 default:
28                     oDiv.innerHTML = '<p>人生苦短，我学python</p>'
29                     break;
30             }
31         };
32     </script>
33 </body>
34 </html>

锚点值跳转

实例：固定导航栏及滚动监听

知识：固定定位+ dom中的盒子位置获取方法 offsettop，scrollTop

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         *{
  8             padding: 0;
  9             margin: 0;
 10         }
 11         ul{
 12             list-style: none;
 13         }
 14         a{
 15             text-decoration: none;
 16         }
 17         input{
 18             border: 0;
 19             outline: none;
 20         }
 21         body{
 22             /*padding-top: 80px;*/
 23         }
 24         .header{
 25             width: 100%;
 26             height: 70px;
 27             background-color: black;
 28             /*display: none;*/
 29         }
 30         .w{
 31             width: 1210px;
 32             overflow: hidden;
 33             margin: 0 auto;
 34         }
 35         .header ul li{
 36             float: left;
 37             width: 242px;
 38             height: 70px;
 39             line-height: 70px;
 40             text-align: center;
 41             background-color: blue;
 42 
 43         }
 44         .header ul li a{
 45             display: block;
 46             width: 242px;
 47             height: 70px;
 48             color: #fff;
 49         }
 50 
 51         /*固定导航栏*/
 52         .header-fix{
 53             width: 100%;
 54             height: 80px;
 55             background-color: white;
 56             box-shadow: 0 0 5px #888;
 57             display: none;
 58             position: fixed;
 59             top: 0;
 60             left: 0;
 61             z-index: 99999;
 62             /*margin-bottom: 10px;*/
 63         }
 64         .header-fix .logo{
 65             float: left;
 66             width: 117px;
 67             height: 57px;
 68             padding-top: 23px;
 69         }
 70         .header-fix .fm{
 71             float: left;
 72             width: 700px;
 73             height: 80px;
 74             margin-left: 100px;
 75         }
 76         .fm input[type='text']{
 77             float: left;
 78             width: 578px;
 79             height: 50px;
 80             border-top: 1px solid #999;
 81             border-left: 1px solid #999;
 82             border-bottom: 1px solid #999;
 83             margin-top: 15px;
 84             padding-left: 20px;
 85             font-size: 20px;
 86         }
 87         .fm input[type='submit']{
 88             float: left;
 89             width: 100px;
 90             height: 52px;
 91             background-color: #38f;
 92             position: relative;
 93             top: 15px;
 94             color: #fff;
 95             line-height: 52px;
 96             font-size: 18px;
 97         }
 98         .box1{
 99             width: 100%;
100             height: 200px;
101             background-color: red;
102         }
103         .box2{
104             width: 100%;
105             height: 300px;
106             background-color: green;
107         }
108 
109     </style>
110 </head>
111 <body style="height: 2000px">
112     <div class="header">
113         <div class="w">
114             <ul>
115                 <li><a href="#">网站导航</a></li>
116                 <li><a href="#">网站导航</a></li>
117                 <li><a href="#">网站导航</a></li>
118                 <li><a href="#">网站导航</a></li>
119                 <li><a href="#">网站导航</a></li>
120             </ul>
121         </div>
122     </div>
123     <div class="header-fix">
124         <div class="w">
125             <div class="logo">
126                 <img src="./logo_top.png" alt="">
127             </div>
128             <form class="fm">
129                 <input type="text" name="">
130                 <input type="submit" name="" value="百度一下">
131             </form>
132         </div>
133     </div>
134     <div class="box1"></div>
135     <div class="box2"></div>
136     <a href="javscript:void(0);">百度</a>
137 
138     <!-- e.preventDefault(); -->
139 
140     <script type="text/javascript">
141         window.onload = function(){
142             var box2Height = document.getElementsByClassName('box2')[0];
143             var fixBox = document.getElementsByClassName('header-fix')[0];
144             var headerBox = document.getElementsByClassName('header')[0];
145 
146             window.onscroll = function(){
147                 console.log(box2Height.offsetTop);
148                 if (document.documentElement.scrollTop >=box2Height.offsetTop) {
149                     fixBox.style.display = 'block';
150                     document.body.style.paddingTop = '80'+ 'px';
151                     headerBox.style.display = 'none';
152                 }else{
153                     fixBox.style.display = 'none';
154                     document.body.style.paddingTop = '0'+ 'px';
155                     headerBox.style.display = 'block';
156                 }
157             }
158         }
159     </script>
160 
161 </body>
162 </html>

js实现滚动监听

client、offset、scroll系列：盒子的位置信息

client：计算对象自己盒模型的宽高

var obj = document.getElementsByTagName('div')[0]

obj.clientTop：盒子边框的高度即border

obj.clientWidth/Height : 可视宽度/高度即 内容+padding 不算border

offset : 计算嵌套中的盒子到body，到父辈盒子的距离【偏移】

offsetWidth/Height：盒模型的宽高，即 内容+padding+border

offsetTop/Left：【滚动监听的目标盒子到父辈或到窗口顶部的参考点】

　　如果父辈没有定位：子盒子不管定位否，都是子盒子外边框到body的距离；

　　如果父辈定位了，子辈定位了，就是到父辈的距离，以父辈作为参考，子盒子的外边框到父盒子的内边框的距离；

scroll：鼠标滑轮从上到下，从左到右，卷起的距离，动态的数据

window.onscroll(function(){}) : onscroll是动态监听滚动距离事件名，window是对象，计算谁就算谁

scrollTop：到父盒子的距离，不包含border，即 内容+padding，可视高度

scrollLeft/Width/Height：内容+padding

回到顶部