元素节点

概述

Element节点对象对应网页的HTML元素 每一个HTML元素，在DOM树上都会转化成一个Element节点对象。

元素的属性

Element.id 返回id的名字

image.png
image.png

Element.tagName 返回当前元素的标签名（大写）

  <p id="p1">
 var p = document.querySelector('p');
 p.tagName // "P" 大写的p，与nodeName的值一致。

Element.className 返回当前元素的class名，它的值是一个字符串，每个class之间用空格分割

 <div class=“one tow three” id=“myDiv”></div>

 var div = document.getElementById('myDiv');
 div.className
 // "one two three"

Element.classList返回当前元素的所有class名，他的值是一个伪数组。

1.add()添加一个类名

2.remove()删除一个类名

3.toggle()如果有传入的类名，则删除，若没有则添加

4.contains()用来监测一个类名是否存在存在为true

5.item()返回指定的下标位置的类名

6.toString()返回所有类名的字符串表示方法。与className 获取的值一样

image.png

Element.clientWidth Element.clientHeight返回元素本身的宽高，算入paddding,不算入margin 和border.只对块元素生效

Element.offsetWidth Element.offsetHeight返回当前元素的宽和高，算入paddding和border。 块元素和行内元素都生效。

Element.scrollLeft Element.scrll Top

scrollLeft返回元素水平滚动条的滚动像素数。
scrollTop返回元素垂直滚动条的滚动像素数。
这两个属性可读可写。

Element.offsetParent 返回最靠近当前元素的、并且CSS的position属性不等于static的上层元素。

但是如果该元素display:none或者position:fixed.offserParent返回null

image.png

结果：若为position:relative则返回div若为display:none则返回null

Element.offsetLeft Element.offsetTop返回该元素距离offsetParent（父级元素）的水平距离和垂直距离。

Element.firstElementChild属性返回当前元素的第一个元素节点，Element.lastElementChild返回最后一个元素子节点。没有则返回null

Element.nextElementSibling

Element.previousElementSibling

Element.nextElementSibling属性返回当前元素节点的后一个同级元素节点，如果没有则返回null

元素节点的方法

Element.remove()用于移除节点。移除它本身