# Element
# Element 类型
除了 Document 类型， Element 类型就是 Web 开发中最常用的类型了。Element 表示 XML 或 HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。
# 元素的属性
- getAttribute()
- setAttribute()
- removeAttribute()
let div = document.getElementById("myDiv");
alert(div.getAttribute("id")); // "myDiv"
alert(div.getAttribute("class")); // "bd"
alert(div.getAttribute("title")); // "Body text"
alert(div.getAttribute("lang")); // "en"
alert(div.getAttribute("dir")); // "ltr
# 元素的大小
# offsetWidth/Height
这两个属性是最简单的。它们提供了元素的“外部” width/height。或者，换句话说，它的完整大小（包括边框）。
如果一个元素（或其任何祖先）具有 display:none 或不在文档中，则所有几何属性均为零（或 offsetParent 为 null）。
我们可以用它来检查一个元素是否被隐藏，像这样：
function isHidden(elem) {
return !elem.offsetWidth && !elem.offsetHeight;
}
# clientWidth/Height
这些属性提供了元素边框内区域的大小。
它们包括了 “content width” 和 “padding”，但不包括滚动条宽度（scrollbar）
# scrollWidth/Height
这些属性就像 clientWidth/clientHeight，但它们还包括滚动出（隐藏）的部分
# 元素的坐标
# offsetParent，offsetLeft/Top
offsetParent 是最接近的祖先（ancestor），在浏览器渲染期间，它被用于计算坐标。
最近的祖先为下列之一：
- CSS 定位的（position 为 absolute，relative 或 fixed）
- 或
<td>，<th>，<table> - 或
<body>
属性 offsetLeft/offsetTop 提供相对于 offsetParent 左上角的 x/y 坐标。
# clientTop/Left
在元素内部，我们有边框（border）。
为了测量它们，可以使用 clientTop 和 clientLeft。
# scrollLeft/scrollTop
属性 scrollLeft/scrollTop 是元素的隐藏、滚动部分的 width/height
换句话说，scrollTop 就是“已经滚动了多少”。
# getBoundingClientRect()
方法 elem.getBoundingClientRect() 返回能够包裹elem的最小矩形的窗口坐标，该矩形将 elem 作为内建 DOMRect 类的对象。
主要的 DOMRect 属性：
- x/y — 矩形原点相对于窗口的 X/Y 坐标，
- width/height — 矩形的 width/height（可以为负）
- top/bottom — 顶部/底部矩形边缘的 Y 坐标，
- left/right — 左/右矩形边缘的 X 坐标。
注意旋转后，DOMRect 会发生变化
# 总结
元素具有以下几何属性：
- offsetParent —— 是最接近的 CSS 定位的祖先，或者是 td，th，table，body。
- offsetLeft/offsetTop —— 是相对于 offsetParent 的左上角边缘的坐标。
- offsetWidth/offsetHeight —— 元素的“外部” width/height，边框（border）尺寸计算在内。
- clientLeft/clientTop —— 从元素左上角外角到左上角内角的距离。对于从左到右显示内容的操作系统来说，它们始终是左侧/顶部 border 的宽度。而对于从右到左显示内容的操作系统来说，垂直滚动条在左边，所以 clientLeft 也包括滚动条的宽度。
- clientWidth/clientHeight —— 内容的 width/height，包括 padding，但不包括滚动条（scrollbar）。
- scrollWidth/scrollHeight —— 内容的 width/height，就像 clientWidth/clientHeight 一样，但还包括元素的滚动出的不可见的部分。
- scrollLeft/scrollTop —— 从元素的左上角开始，滚动出元素的上半部分的 width/height。
除了 scrollLeft/scrollTop 外，所有属性都是只读的。如果我们修改 scrollLeft/scrollTop，浏览器会滚动对应的元素。