Element 对象
Element对象
Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。
实例属性
Element.id
Element.id属性返回指定元素的id属性，该属性可读写。
// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"Element.tagName
Element.tagName属性返回指定元素的大写标签名
// HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"Element.className，Element.classList
className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。
classList属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。
// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');
div.className
// "one two three"
div.classList
// {
// 0: "one"
// 1: "two"
// 2: "three"
// length: 3
// }上面代码中，className属性返回一个空格分隔的字符串，而classList属性指向一个类似数组的对象，该对象的length属性（只读）返回当前元素的class数量。
classList对象有下列方法。
add()：增加一个 class。 remove()：移除一个 class。 contains()：检查当前元素是否包含某个 class。
var div = document.getElementById('myDiv');
div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.contains('myCssClass'); // 返回 true 或者 falseElement.innerHTML
Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。
如果将innerHTML属性设为空，等于删除所有它包含的所有节点。
el.innerHTML = '';Element.innerText
Element.innerText与Element.innerHTML类似，但是如果写入的内容是标签则识别为字符串
Element.clientHeight，Element.clientWidth
Element.clientHeight属性返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。
除了元素本身的高度，它还包括padding部分，但是不包括border、margin。
Element.clientWidth属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding
document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），
document.body的高度则是网页的实际高度。
// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeightElement.scrollHeight，Element.scrollWidth
Element.scrollHeight属性返回一个整数值，表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。
Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读。
整张网页的总高度可以从document.documentElement或document.body上读取。
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeightElement.scrollLeft，Element.scrollTop
Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。
如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。
document.documentElement.scrollLeft
document.documentElement.scrollTopElement.offsetLeft，Element.offsetTop
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.getAttribute()
Element.getAttribute方法接受一个字符串作为参数，返回同名属性的值。如果没有该属性，则返回null。
var mydiv = document.getElementById('mydiv');
var id = mydiv.getAttribute('id');Element.setAttribute()
Element.setAttribute方法用于为当前节点设置属性。如果属性已经存在，将更新属性值，否则将添加该属性。该方法没有返回值。
Element.removeAttribute()
Element.removeAttribute方法移除指定属性。该方法没有返回值。