Element对象对应网页的HTML标签元素。每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象（以下简称元素节点）。
特征相关的属性
Element.attributes
Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点
Element.id，Element.tagName
Element.id属性返回指定元素的id属性，该属性可读写。
Element.tagName属性返回指定元素的大写标签名，与nodeName属性的值相等。
/ HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"Element.innerHTML
Element.innerHTML属性返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容。
如果将innerHTML属性设为空，等于删除所有它包含的所有节点。
var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name;Element.outerHTML
Element.outerHTML属性返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。
// HTML代码如下
// <div id="d"><p>Hello</p></div>
d = document.getElementById('d');
d.outerHTML
// '<div id="d"><p>Hello</p></div>'Element.className，Element.classList
className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。
classList属性则返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。
<div class="one two three" id="myDiv"></div>
上面这个div元素的节点对象的className属性和classList属性，分别如下。
document.getElementById('myDiv').className
// "one two three"
document.getElementById('myDiv').classList
// {
// 0: "one"
// 1: "two"
// 2: "three"
// length: 3
// }classList对象有下列方法。
add()：增加一个class。
remove()：移除一个class。
contains()：检查当前元素是否包含某个class。
toggle()：将某个class移入或移出当前元素。
item()：返回指定索引位置的class。
toString()：将class的列表转为字符串。
myDiv.classList.add('myCssClass');
myDiv.classList.add('foo', 'bar');
myDiv.classList.remove('myCssClass');
myDiv.classList.toggle('myCssClass'); // 如果myCssClass不存在就加入，否则移除
myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
myDiv.classList.item(0); // 返回第一个Class
myDiv.classList.toString();
盒状模型相关属性
Element.clientHeight，Element.clientWidth
Element.clientHeight属性返回元素节点可见部分的高度，Element.clientWidth属性返回元素节点可见部分的宽度
对于整张网页来说，当前可见高度（即视口高度）要从document.documentElement对象（即<html>节点）上获取，等同于window.innerHeight属性减去水平滚动条的高度。没有滚动条时，这两个值是相等的；有滚动条时，前者小于后者。
var rootElement = document.documentElement;
// 没有水平滚动条时
rootElement.clientHeight === window.innerHeight // true
// 没有垂直滚动条时
rootElement.clientWidth === window.innerWidth // trueElement.clientLeft，Element.clientTop
Element.clientLeft属性等于元素节点左边框（left border）的宽度，Element.clientTop属性等于网页元素顶部边框的宽度，单位为像素。
Element.scrollHeight，Element.scrollWidth
Element.scrollHeight属性返回某个网页元素的总高度，Element.scrollWidth属性返回总宽度，可以理解成元素在垂直和水平两个方向上可以滚动的距离
Element.scrollLeft，Element.scrollTop
Element.scrollLeft，Element.scrollTop
Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。
Element.offsetHeight，Element.offsetWidth
Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。
下面的代码可以算出元素左上角相对于整张网页的坐标。
function getElementPosition(e) {
var x = 0;
var y = 0;
while (e !== null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {x: x, y: y};
}Element.style
每个元素节点都有style用来读写该元素的行内样式信息
相关节点的属性
Element.children属性返回一个HTMLCollection对象，包括当前元素节点的所有子元素。它是一个类似数组的动态对象（实时反映网页元素的变化）。如果当前元素没有子元素，则返回的对象包含零个成员。
// para是一个p元素节点
if (para.children.length) {
var children = para.children;
for (var i = 0; i < children.length; i++) {
// ...
}
}Element.firstElementChild，Element.lastElementChild
Element.firstElementChild属性返回第一个HTML元素类型的子节点，Element.lastElementChild返回最后一个HTML元素类型的子节点。
Element.nextElementSibling，Element.previousElementSibling
Element.nextElementSibling属性返回当前HTML元素节点的后一个同级HTML元素节点，如果没有则返回null。
// 假定HTML代码如下
// <div id="div-01">Here is div-01</div>
// <div id="div-02">Here is div-02</div>
var el = document.getElementById('div-01');
el.nextElementSibling
// <div id="div-02">Here is div-02</div>属性相关的方法
元素节点提供以下四个方法，用来操作HTML标签的属性。
Element.getAttribute()：读取指定属性
Element.setAttribute()：设置指定属性
Element.hasAttribute()：返回一个布尔值，表示当前元素节点是否有指定的属性
Element.removeAttribute()：移除指定属性
查找相关的方法
以下四个方法用来查找与当前元素节点相关的节点。这四个方法也部署在document对象上，用法完全一致。
Element.querySelector()
Element.querySelector方法接受CSS选择器作为参数，返回父元素的第一个匹配的子元素。
var content = document.getElementById('content');
var el = content.querySelector('p');Element.querySelectorAll()
Element.querySelectorAll方法接受CSS选择器作为参数，返回一个NodeList对象，包含所有匹配的子元素。
var el = document.querySelector('#test');
var matches = el.querySelectorAll('div.highlighted > p');Element.getElementsByClassName()
Element.getElementsByClassName方法返回一个HTMLCollection对象，成员是当前元素节点的所有匹配指定class的子元素。该方法与document.getElementsByClassName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。
element.getElementsByClassName('red test');
Element.getElementsByTagName()
Element.getElementsByTagName方法返回一个HTMLCollection对象，成员是当前元素节点的所有匹配指定标签名的子元素。该方法与document.getElementsByClassName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。
var table = document.getElementById('forecast-table');
var cells = table.getElementsByTagName('td');Element.matches()
Element.matches方法返回一个布尔值，表示当前元素是否匹配给定的CSS选择器。
if (el.matches('.someClass')) {
console.log('Match!');
}事件相关的方法
Element.addEventListener()：添加事件的回调函数
Element.removeEventListener()：移除事件监听函数
Element.dispatchEvent()：触发事件
element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);
var event = new Event('click');
element.dispatchEvent(event);
属性的操作
HTML元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。
<a id="test" href="http://www.example.com">
链接
</a>上面代码中，a元素包括两个属性：id属性和href属性。
Element.attributes属性
HTML元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上
document.body.attributes[0]
document.body.attributes.bgcolor
document.body.attributes['ONLOAD']注意，上面代码中，第一行attributes[0]返回的是属性节点对象，后两行都返回属性
属性节点对象有name和value属性，对应该属性的属性名和属性值，等同于nodeName属性和nodeValue属性。
// HTML代码为
// <div id="mydiv">
var n = document.getElementById('mydiv');
n.attributes[0].name // "id"
n.attributes[0].nodeName // "id"
n.attributes[0].value // "mydiv"
n.attributes[0].nodeValue // "mydiv"
元素节点对象的属性
这样修改HTML属性，常常用于添加表单的属性。
var f = document.forms[0];
f.action = 'submit.php';
f.method = 'POST';上面代码为表单添加提交网址和提交方法。
属性操作的标准方法
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
Element.getAttribute()
Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。
// HTML代码为
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"
Element.setAttribute()
Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。
var d = document.getElementById('d1');
d.setAttribute('align', 'center');
Element.hasAttribute()
Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。
var d = document.getElementById('div1');
if (d.hasAttribute('align')) {
d.setAttribute('align', 'center');
}上面代码检查div节点是否含有align属性。如果有，则设置为“居中对齐”。
Element.removeAttribute()
Element.removeAttribute方法用于从当前元素节点移除属性。
// HTML代码为
// <div id="div1" align="left" width="200px">
document.getElementById('div1').removeAttribute('align');
// 现在的HTML代码为
// <div id="div1" width="200px">
dataset属性
有时，需要在HTML元素上附加数据，供JavaScript脚本使用。一种解决方法是自定义属性。
这种方法虽然可以达到目的，但是会使得HTML元素的属性不符合标准，导致网页的HTML代码通不过校验。
更好的解决方法是，使用标准提供的data-*属性。
<div id="mydiv" data-foo="bar">然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作HTML元素标签的data-*属性。
var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'上面代码中，通过dataset.foo读写data-foo属性。
删除一个data-*属性，可以直接使用delete命令。
delete document.getElementById('myDiv').dataset.foo;除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。
