1 .element对应网页的HTML元素，每一个HTML元素，在dom树上都会转化为一个Element对象，元素节点的nodeType属性都是1.
2 .不同的HTML元素对应的元素节点是不一样的，浏览器使用不同的构造函数，可以生成不同的元素节点。比如a,button都是不同种类的对象
3 .因此元素节点不是一种对象，而是一组对象，这些对象除了继承了element的属性和方法，还有各自的属性和方法。
实例属性
1 .el.id:大小写敏感，可读写
2 .el.tagName:返回元素的大写标签名，与nodeName属性的值相等
3 .el.dir：读写当前元素的文字方向，从左到右，从右到左
4 .el.accessKey:读写分配给当前元素的快捷键 alt +设置的快捷键
5 .draggable:返回一个可读写的布尔值，表示当前元素是否可以拖动。
6 .el.lang:返回当前元素的语言设置，可以读写
7 .el.tabindex:返回一个整数，表示当前元素在tab键遍历的时候的顺序，该属性可以读写
8 .el.title:读写当前元素的HTML属性title，该属性通常用来指定鼠标悬浮时弹出的文字提示框
9 .el.hidden:bool,显示当前元素是否可见，可读写.该属性与css设置是相互独立的，这个属性只有在css没有明确指定当前元素的可见性时才有效
10 .el.contentEditable:设置元素的值，使得元素的内容可以编辑，这个使用js作别一种别的实现
1.true:元素内容可编辑
2.fasle:元素内容不可编辑
3.inherit:继承父元素的设置
11 .el.attributes:返回一组类似数组的对象，成员是当前元素节点的所有属性节点
12 .el.className:读写当前元素节点的class属性，他的值是一个字符串，每个class之间用空格分割
13 .el.classList:返回一个类似数组的对象，当前元素节点的每个class都是这个对象的一个成员
1.add
2.remove
3.contains
4.toggle
5.item:返回指定索引位置的class
6.toString:将class的列表转换为字符串
14 .el.dataset.x:返回一个元素的自定义属性。可读写
15 .innerHTML：返回一个字符串，等同于该元素内包含的所有html代码。可读写,可以改写所有元素节点内的内容，包括HTML和body元素。有安全风险，如果插入的是文本，使用textContent属性代替innerHTML
16 .outerHTML:返回一个字符串，表示当前元素节点的所有HTML代码，包括该元素本身和所有子元素。还是可读写元素，对他赋值，就相当于连本身元素都一起替换掉。如果一个元素没有父节点，那么设置这个属性就会报错
17 .el.clientHeight,el.clientWidth:返回当前元素节点的css高度，单位是像素，只对块级元素生效，行内元素返回0,不包括padding，但是不包括border,margin。如果有水平滚动条，还要减去水平滚动条，而且这个值始终是整数，会自动取整。
18 .document.documentElement.clientHeight:返回当前浏览器的窗口的高度，等同于window.innerHeight-水平滚动调的高度。
19 .document.body.clientHeight:网页的实际高度。
20 .Element.clientLeft,el.clientTop:返回节点元素左边框的宽度，不包括左侧的padding和margin.
21 .el.scrollHeight,el.scrollWidth:返回当前元素的总高度，总宽度，包括溢出容器，当前的不可见的部分。包括padding,但是不包括border,margin以及水平滚动条的高度，还包括伪类元素的高度。
22 .document.documentElement.scrollHeight:整张网页的高度。
23 .document.body.scrollHeight:整张网页的高度。即时元素节点的内容出现溢出，即使溢出的内容是隐藏的，scrollHeight属性仍然可以返回元素的总高度。
24 .el.scrollLeft,el.scrollTop:当前元素的水平滚动条向右，向下滚动的像素数量。对于没有滚动条的元素的网页，这俩个元素总是等于0.隐藏在内容左侧的像素
25 .document.socumentElement.scrollTop:返回整张网页的水平和垂直滚动距离.这个属性是可读的
26 .el.offsetParent:返回当前最靠近元素的，并且css的position属性不等于static的上层元素。主要用于确定子元素位置偏移的计算基准。el.offsetTop,el.offsetLeft都是根据offsetParent元素计算的。如果该元素是不可见的，或者位置是固定的，position的属性是fixed，则offsetparent属性返回bull.
27 .el.offsetHeight,el.offsetWidth:返回元素的垂直高度，包括元素本身的高度，padding,和border，以及可能的水平滚动条。这两个属性是只读属性，如果元素的css设置为不可见，则返回0
28 .el.offsetLeft,el.offsetTop:返回元素左上角相对于el.offsetParent节点的水平位移。
function(e){
let x=0;
let y=0;
while(e !==null){
x+=e.offsetleft;
y+=e.offsetTop;
e=e.offsetParent;
}
return {x,y}
}
29 .el.children:分返回当前元素节点的所有子元素，只包含元素类型的子节点，不包括其他类型的子节点。
30 .el.firstElementChild,el.lastElementChild:返回当前元素的字一个元素子节点。
31 .el.nextElementSibling,el.previousElementSibling:返回当前元素节点的后一个同一元素节点，如果没有则返回null。
实例方法
属性的相关方法
1 .getAttribute()读取某个属性的值。
2 .getAttributeNames()返回当前元素的所有属性名
3 .setAttribute()写入某个属性值
4 .hasAttruibute()是否有某个属性
5 .hasAttributes()当前元素是否有属性
6 .removeAttribute()删除属性
7 .浏览器执行querySelector方法时，会现在全局范围内搜索给定的css选择器，然后过滤出哪些是属于当前元素的子元素。
8 .还有一些选择元素的方法
9 .el.closest():返回匹配该选择器的，最接近当前节点的一个祖先节点。如果没有任何子节点匹配css选择器，则返回null
10 .el.matches():返回一个布尔值，表示当前元素是否匹配给定的css选择器。
事件的相关方法
1 .继承自EventTarget接口
2 .el.addEventListener():添加事件的回调函数。
3 .el.removeeventListener():移除事件监听函数
4 .el.dispatchEvent():触发事件
5 .el.scrollIntoView(true/false):一定当前元素，进入浏览器的可见区域。true:元素的顶部与当前区域的可见部分对齐，如果为false，表示当前元素的底部与当前区域的可见部分对齐，前提必须是当前区域可滚动。
6 .el.getBoundingClientRect():返回当前元素节点css盒模型的所有信息
1.x：元素左上角相对于视口的横坐标
2.width:元素宽度
3.left:与x相等
4.right:x+width
5 .由于元素相对于视口会随着页面的滚动变化，所以表示位置的四个值都不是固定不变的，因此，left+window.scrollX=绝对位置
6.width是包括了元素本身+padding+border。
7.
7 .el.getClientRects()：当前元素在页面上形成的所有矩形，每个矩形都有上述属性。对于盒状元素，返回的成员中只有一个成员，如果是行内元素，返回对象的成员有多少，取决于该元素在页面内所占的行数。这个方法主要用来判断行内元素是否有换行，以及每一行的位置偏移。
8 .还有很多重复的方法，比如el.remove()，就是继承自ChildNode接口
9 .el.focus({preventScroll:false}),el.blur()：将当前页面的焦点，转移到指定元素上。里面可以传一个参数，指定是否将当前元素停留在原始位置，而不是滚动到可见区域。
10 .el.click()在当前元素上模拟一次鼠标点击，相当于触发click事件。
