H5：HTMLElement
一、属性 properties
1、offsetParent
HTMLElement.offsetParent很有用，因为 offsetTop和 offsetLeft 都是相对于其内边距边界的。offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。
2、offsetLeft
HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。
然而，对于可被截断到下一行的行内元素（如 span），offsetTop 和 offsetLeft 描述的是第一个边界框的位置（使用 Element.getClientRects() 来获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸（使用 Element.getBoundingClientRect 来获取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。
3、offsetTop
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent元素的顶部内边距的距离。
4、offsetHeight
HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
5、offsetWidth
HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth 是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
6、dataset
dataset属性名以 data-开头。只能包含字母、数字、“-”、“.”、“:”和“_”。任何ASCII大写字母(A到Z)都被转换成小写字母。
举例：
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
const el = document.querySelector('#user');
// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
// set a data attribute
el.dataset.dateOfBirth = '1960-10-03';
// JS结果: el.dataset.dateOfBirth === '1960-10-03'
// HTML结果: <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth="1960-10-03">John Doe</div>
delete el.dataset.dateOfBirth;
// JS结果: el.dataset.dateOfBirth === undefined
// HTML结果: <div id="user" data-id="1234567890" data-user="johndoe">John Doe</div>
if ('someDataAttr' in el.dataset === false) {
el.dataset.someDataAttr = 'mydata';
// JS结果: 'someDataAttr' in el.dataset === true
// HTML结果: <div id="user" data-id="1234567890" data-user="johndoe" data-some-data-attr = "mydata">John Doe</div>
}
7、innerText
innerText 属性表示一个节点及其后代的“渲染”文本内容。
8、title
HTMLElement.Title 属性表示元素的标题：当鼠标放在节点上时，文本通常以“tooltip”的形式显示。
二、方法 methods
1、blur()
HTMLElement.blur() 方法从当前元素中移除键盘焦点。
语法：
element.blur();
2、focus()
HTMLElement.focus() 方法设置指定元素的焦点(如果可以聚焦的话)。焦点元素是默认情况下接收键盘和类似事件的元素。
语法：
element.focus(options);
或
element.focus({preventScroll:true});
说明：
preventScroll指示浏览器是否应该滚动文档以将新聚焦的元素引入视图。preventScroll的值为false(默认值)，意味着浏览器会在聚焦元素后将其滚动到视图中。如果preventScroll设置为true，则不会发生滚动。
3、click()
HTMLElement.click() 模拟鼠标在元素上的单击。当 click() 与受支持的元素一起使用时(例如<input>)，它会触发元素的click事件。然后该事件冒泡到文档树(或事件链)中更高的元素，并触发它们的单击事件。
