DOM

女爷i 2021-09-07 06:02 416阅读 0赞

### 目录 ###

*  一、什么是DOM
 *  二、DOM节点
 *   *  1.DOM节点的分类
     *  2.获取元素节点
     *  3.获取属性节点
     *  4.获取文本节点
     *  5.操作元素节点
     *  6.操作文本节点
 *  三、事件
 *   *  1.事件的类型
 *  四、事件的捕获和冒泡
 *  五、事件的参数
 *   *  1.行内样式的参数
     *  2.赋值式的点击事件的参数
 *  六、innerText、innerHTML和value
 *  七、修改元素的样式style
 *  九、获取自定义属性
 *  十、document.write()、innerHTML和document.createElement()
 *  十一、事件对象
 *  十二、事件委托
 *  十三、案例
 *   *  1.禁用鼠标右键
     *  2.禁止鼠标选中文字
     *  3.取消a链接的默认跳转行为
 *  十四、H5网页特效
 *   *  1.获取元素偏移量offset
     *  2.获取元素可视区client
     *  3.获取元素滚动距离scroll

# 一、什么是DOM #

1.DOM是文档对象模型  
     为文档提供了结构化表示，并定义如何通过脚本来访问文档结果目的就是为了能让JS操作html元素而制定的一个规范。

2.处理网页内容的方法和接口。

3.DOM是一个复合的数据类型。  
      DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。

**1.网页解析过程**  
HTML加载完成后，渲染引起会在内存中把HTML稳定生产一个DOM树，dom树有一个且只有一个根节点，就是html节点。

# 二、DOM节点 #

1.在HTML当中一切都是节点。  
2.整个文档就是一个文档节点。  
3.每一个HMTL标签都是一个元素节点（标签）。  
4.标签中的文字则是文字节点。（文本）。  
5.标签的属性是属性节点。（属性）  
6.节点都是对象

## 1.DOM节点的分类 ##

DOM节点可以分三类：  
标签：是元素节点  
文字:是文本节点  
属性：是属性节点

## 2.获取元素节点 ##

一般我们操作的都是元素节点，很少操作属性节点和文本节点，节点获取到后是一个对象形式的存在，可以操作它的属性。  
**获取body**

document.body

**获取html**

document.documentElement

**1.通过id获取**

<body>
    <div id="box">
    <div>
    </body>
    <script> document.getElementById('box'); </script>

document.getElementById可以获取到指定Id的元素，返回值是一个元素节点。

**2.通过标签获取**

<body>
    <div id="box">
    <div>
    </body>
    <script> document.getElementsByTagName("div") </script>

document.getElementsByTagName可以获取指定类型的标签，它的返回值时一个数组。即使只有一个div标签，也返回的是一个数组。

**3.通过类名获取H5新增**

<body>
    <div class="box">
    <div class="box">
    <div>
    </body>
    <script> document.getElementsByClass(".box") </script>

document.getElementsByClassName可以获取指定类名的标签，返回值也是一个数组。

**4.通过元素节点之间的关系获取。**  
节点在文档中是有关联的，在嵌套的盒子里，父盒子叫父节点，子盒子叫子节点，同级之间的子盒子叫兄弟节点，兄弟节点又可以分前后节点。

以这样一个模型为例  
**5.获取父元素节点**  
首先要根据id获取到一个子节点，  
document.getElementById(‘son’);  
之后通过这个子节点来访问父节点  
document.getElementById(‘son’).parentNode  
这样就能获取到id为father的节点。

这是在不知道父节点是谁的情况下，可以使用。  
在DOM中，元素节点的父元素节点必须是另一个元素节点，文本节点和文本节点的子元素不允许是元素节点。

**6.获取下一个节点**  
获取下一个节点需要注意的是，在不同浏览器中下一个节点的定义不一样，在E678中指下一个元素节点（标签）没有空格或者换行节点，在火狐谷歌IE9+以后的下一个节点不止元素节点（包括空文档和换行节点）。  
空文档和换行节点就是代码里的空格或者另起一行写代码

document.getElementById('son').nextSibling

IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。  
要是把上面的模型这么写

这样获取的下一个节点肯定就是id为brother的元素节点了。

document.getElementById(‘son’).nextElementSibling在火狐谷歌IE9都指的是下一个元素节点。

综上，可以看出在IE678中获取不到空格节点或者换行节点，只能获取元素节点。可以写一个兼容性写法：使在IE678和火狐谷歌IE9+都获取的是下一个元素节点

document.getElementById('son').nextElementSibling ||document.getElementById('son').nextSibling

在IE678运行时，由于IE678不支持nextElementSibling，根据||或运算的规则，就会运行后面的nextSibling，这样获取的就是下一个元素节点。而在火狐谷歌IE9+运行时，两个都支持，根据||或运算规则，就会运行前面的一个代码nextElementSibling，这样获取的也是元素节点。

**7.获取上一个节点**  
同获取下一个节点一样，在不同浏览器的上一个节点，指代的不一样。  
document.getElementById(‘brother’).previousSibling在IE678中指前一个元素节点,在火狐谷歌IE9+以后都指的是前一个节点（包括空文档或换行节点）。  
document.getElementById(‘brother’).previousElementSibling在火狐谷歌IE9都指的是前一个元素节点。  
兼容性写法：

document.getElementById('brother').previousElementSibling||document.getElementById('brother').previousSibling

这样无论在哪个浏览器中获取的前一个节点都是元素节点。

**8.获取第一个子节点**  
子节点在不同的浏览器中指代的也不一样。  
firstChild：在IE678中指第一个子元素节点（标签），在火狐谷歌IE9+以后都指的是第一个节点，包括空文档。就是代码的空格。  
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。  
兼容性写法：

document.getElementById('father').firstElementChild || document.getElementById('father').firstChild

**9.获取最后一个子节点**  
lastChild：在IE678中指最后一个子元素节点（标签），在火狐谷歌IE9+以后都指的是最后一个节点。  
要是上面代码改成

这样最后一个节点就是元素节点了。  
lastElementChild：火狐谷歌IE9都指的最后一个元素节点  
兼容性写法：

document.getElementById('father').lastElementChild ||document.getElementById('father').lastChild

**10.获取所有子节点**  
childNodes：会返回所有的子节点，包括空格或换行。一行代码换行时，只有一个空文档节点。  
children：会返回所有的元素节点，不包括空格和换行，在IE678里注释节点也会被打印出来

**11.获取所有兄弟节点**  
这个没有找到属性来获取。可以自己写一个方法。

逻辑就是通过一个节点，先获取父节点下的所有子元素节点，再遍历这个数组，判断是否等于自己，不等与自己就存放到一个新数组中。最后返回这个新数组。  
这样siblings方法就变成了一个获取所有兄弟节点的方法了。

**12.H5新增**

document.querySelector('#id或.类名或标签')

获取第一个类名或标签为指定参数的元素，

document.querySelectorAll('#id或.类名或标签')

获取指定元素的所有标签或类名。

## 3.获取属性节点 ##

获取属性节点先要取到对应的元素节点

<body>
    <div id="box" style="width:200px">
    <div>
    </body>
    <script> var father = document.getElementById('box'); var attribute = father.getAttributeNode('style'); </script>

getAttributeNode就能获取到style这个属性节点。属性节点其实就是元素节点的一个属性，获取元素节点后，他的属性中就存在了这个属性节点，没必要这么做。

## 4.获取文本节点 ##

获取文本节点没有直接的方法，一般获取都是用元素的InnerHtml或者innerText打印出来  
或者就是写代码时保证文本标签前面没有空格，这样双标签里的第一个子节点就必定是文本节点了

<body>
    
    <div id="father" style="width: 100px;" class="mm" >aa</div>
    
    <div id="mother"></div>
    </body>
    <script>
        var fater= document.getElementById('father');
         var d = fater.firstChild.nodeValue;
        console.log(d);
    </script>

这时候打印出来的就是aa，是节点的值，要是打印fater.firstChild，会打印“aa”,带双引号，表示文本节点。

## 5.操作元素节点 ##

在获取到节点之后，就可以对节点进行一些操作。

以这个例子为例  
**1.创建新元素节点**

var a = document.createElement("div")

这样就能创建一个div标签

**2.在父节点最后插入创建的新元素节点**

先获取父节点

document.getElementById('father').appendChild(a)

这样文档结构就变成了

**3.在指定元素节点前插入元素节点**

var fater= document.getElementById('father')
    var son= document.getElementById('son')
    var newNode = document.createElement("div")
    fater.insertBefore(newNode,son)

这样就能在id为son的盒子前面新增一个div盒子。

**4.删除元素节点**

var fater= document.getElementById('father')
    var son= document.getElementById('son')
    fater.removeChild(son)

这样就会在文档里删除id为son的盒子

**5.复制元素节点**  
cloneNode：复制节点，有一个参数，为boolean值，true表示复制这个节点下的所有子节点和此节点，深复制，false相当于不填，只复制此节点

document.getElementById('father').cloneNode(true)

**6.节点的判断**  
获取到节点后，要是要知道这是什么节点，可以用节点的属性  
nodeType来判断节点的类型。  
节点. nodeType = 1 表示的是元素节点  
节点.nodeType = 2 表示是属性节点  
节点.nodeType = 3 是文本节点

**7.节点的值**  
nodevalue来获取节点的值  
元素节点的值为null  
属性节点的值为就是属性的值  
文本节点的值为文字

**8.节点的名字**  
nodeName来获取节点的名字  
元素节点的名字是标签  
属性节点的名字就是属性  
文本节点是\#text

**9.替换元素节点的类名**  
元素节点.className.replace(“被替换的类型”，“需要加入的类型”)

**10.添加元素节点的类名**  
元素节点.className + = “空格+新类名”  
主要要用加等于，不然的化就是直接设置类名了，而且新类名前面一定要加一个空格，才能拼接到已有的类名后面。没有的话会直接拼到前一个类名上，变成了一个新类名。

**11.获取元素节点的所有类名**

e.classList
    e.classList.add('添加类名')
    e.classList.remove('删除类名')
    e.classList.toggle('切换类名')

**4.元素节点的属性**

**1.获取元素节点的属性**

var fater= document.getElementById('father')
      var style =  fater.style

上面获取的是元素的style属性，还能获取元素的其他属性，比如id，class。  
获取class类名时要用className  
一般修改节点的属性都是操作盒子的样式，所以先要访问style属性，再修改盒子的css样式，这样的修改相当于修改行内样式，优先级是最高的。  
注意获取style属性时，只能获取行内样式，不能获取内嵌或外链写的样式  
上面是点方法，还有一个方法getAttribute

var fater= document.getElementById('father')
      var style =  fater.getAttribute('style')

这样都可以获取写在行内样式的style,但获取不到写在css的style

在css和js中，属性的命名方式不一样，在css中**background-color**是这么写，在js中backgroundColor要使用驼峰命名法，它们指的是用一个东西，不要纠结。

**2.设置元素节点的属性**  
设置元素的属性和获取元素的属性方法一致，都是点方法，在后面加上要设置的值就可以了。

var fater= document.getElementById('father')
       fater.style.witdh= '500px'

上面就是设置id为father的盒子宽度为500px;注意值要写成字符串形式。  
或者方法setAttribute(），设置类名时不是className，就是class，比较特殊

var fater= document.getElementById('father')
       fater.setAttribute('title','test');

上面是设置了盒子的一个title属性，值为test。

**3.删除元素节点的属性**

var fater= document.getElementById('father')
       fater.removeAttribute('title','test');

这样就把上面添加的属性title给删除掉了。

**4.获取元素节点的文本值**

<div id="father" style="width: 100px;" class="mm" >aa</div>
    
    </body>
    <script>
        var fater= document.getElementById('father');
         fater.innerHTML = "<strong>bb</strong>"
        fater.innerText = "<strong>cc</strong>"
    </script>

innerHtml：  
获取标签里面的内容，可以通过此方法来设置文字内容，要是设置的时候带有标签会把标签转换为对应的样式。  
innerText：  
也是获取标签里的文字内容，要是设置的时候带有标签不会把标签转换为对应的样式，会直接把标签显示出来。

**5.控件**

控件算是一个比较特殊的节点。  
控件的value是它所显示的值，innerHtml和innerText无效。

## 6.操作文本节点 ##

**1.创建文本节点**

var text= document.createTextNode('hello world');

# 三、事件 #

事件是核心内容，事件就是一系列的动作，根据这些动作来触发一些样式或内容的变化，正因为有了事件，网页才能和用户真正的交互起来。

## 1.事件的类型 ##

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>鼠标点击事件</td> 
  </tr> 
  <tr> 
   <td>ondblclick</td> 
   <td>鼠标双击事件</td> 
  </tr> 
  <tr> 
   <td>onkeyup</td> 
   <td>按下键盘后并松开事件</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>文本内容或下拉菜单中的选项发生改变的事件</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>输入框获得焦点事件</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>输入框失去焦点事件</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标悬停事件</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标移出事件</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>网页文档加载事件</td> 
  </tr> 
  <tr> 
   <td>onunload</td> 
   <td>关闭网页事件</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>表单提交事件</td> 
  </tr> 
  <tr> 
   <td>onreset</td> 
   <td>重置表单事件</td> 
  </tr> 
 </tbody> 
</table>

**2.事件的绑定**  
事件需要绑定到触发事件的元素节点上，这样才能知道是谁触发了什么事件。需要注意的时window也可以绑定事件。

**①赋值绑定**

var fater= document.getElementById('father')
    fater.onclick = function(){ 
       //逻辑
    }

上述就是在id为father的盒子上绑定了一个点击事件。这样的绑定事件一次只能绑定一个，且后面的事件会把前面的事件覆盖

**②变量赋值绑定**

var fater= document.getElementById('father')
      fater.onclick = test;
      function test(){ 
      };

**③行内绑定**

<body>
    <div onclick = "test(this)"></div>
    </body>
    
    <script>
    function test(a){ 
       
      };
    </script>

行内绑定需要注意的是要加一个this实参,不写的话，在这个函数中就不能找到这个点击的元素节点。  
因为这个参数里this指向的不是元素节点，而是window对象。  
**④addEventListener方法绑定**

<body>
    
        <div style="width: 100px;height: 100px;background-color: black;"></div>
    </body>
    </html>
    <script>
      var c = document.getElementsByTagName('div')
         c[0].addEventListener('click',function(e){ 
               console.log(e)
           })

addEventListener(‘事件名’，‘匿名函数’，useCaptrue)  
usecaptrue嵌套的盒子触发事件的顺序  
true表示先触发嵌套盒子父盒子的事件，即按捕获的顺序触发事件  
false表示先触发嵌套盒子里的事件，就还是冒泡顺序触发事件  
不写默认是false  
函数的this指向调用的元素  
注意使用这个绑定事件时，事件不要加前面的on  
w3c标准，推荐使用  
有的事件是不会冒泡的。  
**⑤attachEvent方法绑定**  
IE678里attachEvent(事件类型，事件处理函数)  
这里的this指向的是window  
尽量不要用了，  
**3.事件的参数**  
绑定的事件的函数中有一个参数，可以打印出来看  
就是这个事件对象，包含了点击的位置其他一些属性，可以使用。

**4.一些常用的事件解释**  
**1.onload事件**  
页面加载事件

window.onload = function(){ };

表示页面加载完才会触发这个事件，页面加载完就是文本和图片加载完之后才会执行里面的方法。  
因为js的加载和写在html的位置有关，要是写在body标签前，会先加载js文件，而这时候页面上还是没有文档的，可能会报错。所以可以同onload。先加载页面，在加载js文件。

**2.mouseenter和mouserover的区别**

mouserover会冒泡  
mouseenter不会冒泡。

**5.事件的一些案例**  
**1.多个元素for循环绑定事件**

<body>
       <div></div>
        <div></div>
        <div></div>
    </body>
    </html>
    <script>
        var c = document.getElementsByTagName('div')
        for(var a = 0;a<c.length;a++){ 
             c[a].oncilck = function(){ 
             console.log(a)
    }
      }
     
    </script>

可以用此方式给三个div绑定事件，但此时要用a时，会发现a的值时3，并不是0，1，2。这是因为在语句中var定义的变量会泄露成全局变量，而调用事件是在绑定事件之后，即for循环已经结束了，此时泄露在全局的a的值就是最后一次循环的值为3,为什么不是2，是因为在2的时候，还是小于元素节点数组的长度，还是会进行一次循环，之后a++，就变成了a = 2+1。之后进行判断3是不小于长度3的，循环停止，此时a的值就是3了。  
为了需要在使用每个a时可以做一些操作。

1\*\*.函数自调用\*\*

(function()\{\})()这个形式是一个函数自调用，里面的全局变量不会泄露出来，只能在里面使用。这样就能把每次的a保留下来。  
**2.闭包**

for(var a=0;a<c.length;i++){ 
        c[a].addEventListener("click",function(){ 
            return function(){ 
                console.log(a);
            }
        }(a));

将a作为实参，传给匿名函数，可以将a保留下来。

**3.let 关键词**

let关键词会使语句形成一个块级作用域，a不会泄露出去，只在函数中使用，可以把a保留下来。  
**6.事件的删除**

1.on方式绑定d

box.onclick = null

2.addEventListener方式绑定的

box.addEventListener('click',fn)
    box.removeEventListener('click',fn)
    function fn(){ 
    }
    //需要这种方式才能删除事件。不能用匿名函数

3.attachEvent

box.attachEvent('onclick',fn)
    box.detachEvent('click',fn)
    function fn(){ 
    }
    //需要这种方式才能删除事件。不能用匿名函数

# 四、事件的捕获和冒泡 #

1.什么是事件的捕获。  
在嵌套的盒子里点击盒子里的一个嵌套元素时，程序会从最外层的元素，往里找这个点击的元素，捕获就是从上往下找元素。  
这个阶段不会触发事件。

2.什么是事件冒泡  
找到最底层的元素后，开始触发事件，即从最里面的元素的事件开始触发，冒泡就是从下往上触发事件。

3.取消冒泡事件  
即只触发自身的事件，不会触发外层盒子的事件。

<body>
        <div style="width: 100px;height: 100px;background-color: rgb(201, 55, 55);"  id="box1">
       <div style="width: 50px;height: 50px;background-color: rgb(31, 30, 30);" id="box"></div>
        </div>
    </body>
    </html>
    <script>
     var c = document.getElementById('box1')
      var d = document.getElementById('box')
       c.addEventListener('click',function(e){ 
                console.log(1)
            })
      d.addEventListener('click',function(e){ 
                e.stopPropagation();
                console.log(2)
            })

使用e.stopPropagation()后，不会触发父盒子的console.log(1)方法了。

4.阻止本身事件  
在事件的匿名函数中，只写return false即可

# 五、事件的参数 #

## 1.行内样式的参数 ##

**1.参数为event**

<body>
    <div id="box" onclick="test(event)">
    </div>
    </body>
    <script>
       var a  =document.getElementById('box')
         function test(event){ 
            console.log(events)
            console.log(this)
        }
    </script>

此时函数里的this指向window对象，event代表事件对象，有事件的详细信息，点击位置等。

**2.参数为this**

<body>
    <div id="box" onclick="test(this)">
    </div>
    </body>
    <script>
       var a  =document.getElementById('box')
         function test(event){ 
            console.log(events)
            console.log(this)
        }
    </script>

此时的实参是this，打印这个参数，指代的是出发这个事件的元素节点。函数里的this还是指代的window对象。

综上：event是事件函数的一个内置参数， 实参尽量不要与他同名。定义的函数中this使用都是window。

## 2.赋值式的点击事件的参数 ##

1.参数为event

<body>
    <div id="box" onclick="test(event)">
    </div>
    </body>
    <script>
       var a  =document.getElementById('box')
        a.onclick = function(event){ 
        console.log(event)
        console.log(this)
        }
    </script>

这时候函数里的this指向的是节点，event还是事件对象。

# 六、innerText、innerHTML和value #

都表示一个标签里内容  
innerText不会识别htm标签  
innerHTML会识别html标签  
这两个属性是div元素里的  
控件的内容获取是value

# 七、修改元素的样式style #

修改元素的宽高，需要先点style  
css里的font-size中的-要把s改成大写S  
采用的是驼峰命名发，遇到-都要改大写  
这样写是行内样式

八、设置自定义属性  
H5规定自定义属性要以data-开头

# 九、获取自定义属性 #

<div data-index= '1'>
    var box = document.getElementsByTagName('div')
    var val= box.getAttribute('data-index')//1
    //H5新增
    var v = box.dataset.index//1,dataset是一个集合，里面存放了自定义属性的对象。可通过点方式获取。但是属性必须以data-开头，data-list-index这样的形式是box.dataset.listIndex,要改成大写，而box.getAttribute('data-list-index')不用改，一个是字符串，一个是属性。

自定义属性用getAttribute不要用点方式

# 十、document.write()、innerHTML和document.createElement() #

写了之后会页面重绘，只保留write里的内容，所有标签都没有了。尽量不用  
innerHTML创建元素节点效率高。  
document.createElement()结构清晰。

# 十一、事件对象 #

div.onclick = function(e){ 
      //e就是事件对象，并不是元素对象，this才是元素对象
    }

事件对象只有有了事件才会存在，是系统帮我们创建的，

ie678中是window.event才能获取事件对象  
e.target 是触发事件的对象，但不等于this，this是绑定事件的对象，而e.target 是触发事件的对象，ul绑定事件，点击li，this是ul,而e.target 是li  
e.currentTarget跟this差不多  
e.srcElement 返回的是触发事件的对象，是非标准的，ie6-8使用  
e.type 返回事件的类型，比如click,mouseouver不带on  
e.cancekBubble 阻止冒泡，ie6-8使用，trur就是停止冒泡  
e.returnValue 阻止事件的默认行为，ie678使用，比如阻止a链接的跳转  
e.preventDefault 阻止默认事件，标准，add方式注册的不能用return false来阻止，on方式三种都可以  
e.stopPropagation() 阻止冒泡。标准

1.鼠标事件对象  
e.clientX 是鼠标点击可视窗口的X位置  
e.clientY 是鼠标点击可视窗口的Y位置  
e.pageX 是鼠标点击文档的X位置。  
e.pageY 是鼠标点击文档的Y位置。  
e.screenX 是鼠标相对于电脑屏幕的X位置  
e.screenY 是鼠标相对于电脑屏幕的Y位置.

2.键盘事件对象  
onkeyup 按键松开触发  
onkeydown 按键按下触发  
onkeypress 按键按下触发，但它不识别功能键，ctrl和shift和箭头

e.keyCode 键盘的ASCII值,onkeyup和onkeydown 是不区分字母大小写，onkeypress 是区分大小写的。

# 十二、事件委托 #

给父节点添加点击事件，利用事件对象来获取当前点击的li，因为点击li,事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。  
var ul = document.querySelector(‘ul’)  
ul.addEventListener('click,function(e)\{

e.target//是当前点击的那个元素，

\}’)

提高性能。

# 十三、案例 #

## 1.禁用鼠标右键 ##

document.addEventListener('contextmenu',function(e){ 
            e.preventDefault()
            //或者直接在逻辑最后写return false，也能禁止
    })
    //给文档绑定鼠标右键事件，点击时不能触发右键菜单，右键菜单是默认事件。

## 2.禁止鼠标选中文字 ##

document.addEventListener('selectstart',function(e){ 
            e.preventDefault()
    })
    //禁用选中文字事件。

## 3.取消a链接的默认跳转行为 ##

href = "javascript:;"
    //或者在绑定的函数最后加上
    return false

# 十四、H5网页特效 #

## 1.获取元素偏移量offset ##

1.获取元素距离带有定位父元素的位置  
2.获得元素自身的大小  
3.返回值不带参数

**1.ele.offsetParent**  
获取该元素带有定位的父级元素，如果没有，就返回body

**2.ele.offsetTop**  
获取元素相对带有定位父元素上方的偏移，父亲没有定位属性，就以body为基准。没有右下偏移量

**3.ele.offsetLeft**  
获取元素相对带有定位父元素左边框的偏移

**4.ele.offsetWidth**  
获取自身包括padding、边框、内容区的宽度，返回值不带单位

**5.ele.offsetHeighr**  
获取自身包括padding、边框、内容区的高度，返回值不带单位

**6.offset和style的区别**  
offset  
1.offset可以获取任意样式表中的值  
2.offset获取的值没有单位  
3.offset获得的宽高包含padding+border+width  
4.offset是只读属性，只能获取不能赋值  
5.想要获取元素大小位置，用offset合适。

style  
1.style只能得到行内样式表中的样式值。  
2.style.width获得的是带有单位的字符串  
3.style.width获得不包含padding和border的值  
4.style.width是可读写属性，可以获取也可以赋值。  
5.所以想改变元素的样式，需要style值

7.案例  
主要用来设置盒子跟随鼠标移动。配合定位。

## 2.获取元素可视区client ##

1.ele.clientTop

获取元素上边框的大小  
widndow.pageYoffset  
是页面被卷起的上部

2.ele.clientLeft  
返回元素左边框的大小

3.ele.clientWidth  
返回自身包括padding，内容区的宽度，不带边框，返回值不带单位

4.ele.clientHeigth  
返回自身包括padding，内容区的高度，不带边框，返回值不带单位

## 3.获取元素滚动距离scroll ##

1.ele.scrollTop  
获取被卷去的上侧距离，返回值不带单位，就是元素下滑，被浏览器遮住的部分。

2.ele.scrollLeft  
获取被卷去的左侧距离，返回值不带单位

3.ele.scrollWidth  
返回元素自身的实际宽度，不含边框，反回值不带单位

4.ele.scrollHeight  
返回元素自身的实际高度，不含边框，反回值不带单位