1.Element节点概述
Element对象对应网页的HTML标签元素。每一个HTML标签元素，在DOM树上都会转化为Element节点对象。元素节点的nodeType属性都是1，但是不同的Element节点，比如a标签的节点对象由HTMLAnchorElement()构造函数生成，button标签的节点对象由HTMLButtonElement()构造函数生成。因此，元素节点不是一种对象，而是一组对象。
2.属性
2.1. attributes
返回一个类似数组的对象，成员是当前元素节点的所有属性节点。每个数字索引对应一个属性节点。返回值中，所有成员都是动态的，即属性变化会实时反应在结果集。
<div id="BOX" aitao ="xtt" lml="LML" class="BOX">
<div class="box">1</div>
</div>
let boxs = x.attributes;//这句话的意思就是获取这个BOX对象下的所有属性
console.log(boxs);//输出 id aitao lml class通过attribute属性获取属性节点对象以后，可以通过name（nodeTypename)属性获取属性名，value(nodeTypeValue)属性获取属性值。
2.2 id属性
id属性返回指定元素的id标签。该属性可读写
2.3 tagName属性
返回指定元素的大写标签名
var span = document.getElementById("span");
span.tagName // "SPAN2.4 innerHTML
返回改元素包含的HTML代码，可读写，常用来设置某个节点的内容。如果该属性为空，等于删除它包含的所有节点
注意：如果文本节点中包含&,<,>,%,innerHTML会将它们转换为实体形式&。由于这个原因，插入script标签不会执行。
如果插入的是文本，最好使用textContent
2.5 innerOut
返回一个字符串，内容为指定元素的所有HTML代码，包含它本身和包含的所有子元素
可读写，赋值等于替换当前元素
3.children,childElementCount,firstElementChild,lastElementChild
3.1 children
属性返回一个类似数组的动态对象，包括当前元素节点的所有子元素。如果当前元素没有子元素，则返回的对象包含0个成员。
3.2 childElementCount
返回当前元素的子元素的个数
3.3 firstElementChild
返回第一个子元素，如果没有返回null
3.4 lastElementChild
返回最后一个子元素，如果没有返回null
4.nextElementSibling,previousElementSibling
4.1 nextElementSibling
返回指定元素的后一个同级元素，如果没有返回null
var el = document.getElementById('div-01');
el.nextElementSibling4.2 previousElementSibling
返回指定元素的前一个同级元素，如果没有则返回null
5.className classList
5.1 className
值是一个字符串，读取和设置当前元素的class属性，每个类名之间用空格分隔
5.2 classList
返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员
有下列方法
add():增加一个class
remove():移除一个class
contains():检查当前元素是否包含某个class
toggle():将某个class移入或移出当前元素
item():返回指定索引位置的class
toString()：将class的列表转为字符串
className和classList在添加和删除某个类的写法
// 添加class
document.getElementById('foo').className += 'bold';
document.getElementById('foo').classList.add('bold');
// 删除class
document.getElementById('foo').classList.remove('bold');
document.getElementById('foo').className document.getElementById('foo').className.replace(/^bold$/, '')toggle方法可以接受一个布尔值，作为第二个参数。如果为true,则添加该属性；如果为false则去除该属性。
6.clientHeight,clientLeft,clientTop,clientWidth
6.1 clientHeight
返回元素节点的可见高度，包括padding,但不包括水平滚动条，边框和margin的高度，单位为像素。该属性可以计算得到，等于元素的CSS的高度，加上CSS的padding高度，减去水平滚动条的高度。
6.2 clientLeft
等于元素节点左边框的高度，包括垂直滚动条的宽度，不包括左侧的margin和padding。如果该元素的显示设为display:inline，clientLeft一律为0，不管是否存在左边框
6.3 clientTop
等于网页元素顶部边框的宽度，不包括顶部的margin和padding
6.4 clientWidth
等于网页元素的可见宽度，包括padding,但不包括垂直滚动条，边框和margin的宽度，单位为像素。
以下属性与元素占据的总区域的坐标相关scrollHeight,scrollWidth,scrollLeft,scrollTop
scrollHeight
返回指定元素的总高度，包括由于移除而无法展示在网页的不可见部分。如果一个元素是可以滚动的，则scrollHeight包括整个元素的高度，不管是否存在垂直的滚动条。scrollHeight属性包括padding,但不包括border和margin,该属性为只读属性。
如果不存在滚动条，scrollHeight属性与clientHeight属性是相等的。如果存在scrollHeight属性总是大于clientHeight属性，当滚动条滚动到内容底部时，下面表达式为true
element.scrollHeight - element.scrollTop === element.clientHeightscrollWidth
返回元素的总宽度，包括由于溢出容器而无法显示在网页上的那部分宽度，不管是否存在水平滚动条。该属性是只读属性
scrollLeft
设置或返回水平滚动条向右侧滚动的像素数量。它的值等于元素的最左边与可见最左侧之间的距离，对于没有滚动条或不需要滚动条的元素，该属性等于0.该属性是可读写属性，设置该属性的值，会导致浏览器将指定元素的自动滚动到响应的位置。
scrollTop
设置或返回垂直滚动条向下滚动的像素数量。它的值等于元素的顶部与其可见的最高位置之间的距离，对于那些没有滚动条或不需要滚动的元素，该属性等于0。该属性是可读写属性
设置该属性的值，会导致浏览器将指定元素自动滚动到响应的位置
document.querySelector('div').scrollTop = 150;6 方法
6.1 hasAttribute(),getAttribute(),removeAttribute(),setAttribute()
6.1.1 hasAttribute()
返回一个布尔值，表示当前元素节点是否包含指定的HTML属性
6.1.2 getAttribute()
返回当前元素节点的指定属性，如果不存在，则返回null
var div = document.getElementById('div1');
div.getAttribute('align') // "left"6.1.3 removeAttribute()
用于从当前元素节点移除属性
setAttribute()
用于为当前元素节点新增属性，或编辑已存在的属性
var d = document.getElementById('d1');
d.setAttribute('align', 'center');6.2 querySelector(),querySelectorAll(),getElementsByClassName(),getElementsByTagName()
6.2.1 querySelector()
接受CSS选择器作为参数，返回父元素的第一个匹配的子元素
6.2.2 querySelectorAll()
接受CSS选择器作为参数，返回一个NodeList对象，包含所有的匹配的子元素
6.2.3 getElementsByClassName()
返回一个HTMLCollection对象，成员是当前元素节点的所有匹配指定class的子元素。
6.2.4 getElementsByTagName()
返回一个HTMLCollection对象，成员是当前元素节点的所有匹配指定标签名的子元素。
6.3 closet(),matches()
6.3.1 closet()
返回当前元素节点的最接近的父元素或者当前节点本身 ，条件是必须匹配给定的CSS选择器，如果匹配失败，则返回null
6.3.2 match()
返回一个布尔值，表示当前元素是否匹配给定的CSS选择器
6.4 addEventListener(),removeEventListener(),dispatchEvent()
**// 添加事件监听函数
el.addEventListener('click', listener, false);
// 移除事件监听函数
el.removeEventListener('click', listener, false);
// 触发事件
var event = new Event('click');
el.dispatchEvent(event);**6.4.1 remove()
用于将当前元素节点从DOM树删除
