/**
* 事件参考 https://developer.mozilla.org/zh-CN/docs/Web/Events
* Event <- UIEvent <- MouseEvent
* /
/** Event https://developer.mozilla.org/zh-CN/docs/Web/API/Event#DOM_Event_interface
* detail: 1
* sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
* which: 1
* type: "click" 事件的类型（不区分大小写）。
* target: div#box.box 对事件起源目标的引用。
* currentTarget: null 当前注册事件的对象的引用。这是一个这个事件目前需要传递到的对象（译者：大概意思就是注册这个事件监听的对象）。这个值会在传递的途中进行改变。
* eventPhase: 0 指示事件流正在处理哪个阶段。
* bubbles: true 一个布尔值，用来表示该事件是否在DOM中冒泡。
* cancelable: true 一个布尔值，用来表示这个事件是否可以取消。
* defaultPrevented: false 一个布尔值，表示了是否已经执行过了event.preventDefault()（译者：其实应该就是是否已经阻止默认行为）
* timeStamp: 2929.6050000702962 事件创建时的时间戳，毫秒级别。按照规定，这个时间戳是距离某个特定时刻的差值，但实际上在浏览器中此处的事件戳的定义有所不同。另外，正在开展工作将其改为DOMHighResTimeStamp。（译者注：参考时间戳，在浏览器中此处的时间戳是距离该页面打开时刻的大小）
* srcElement: div#box.box 非标准别名（Microsoft Internet Explorer的旧版本） Event.target.
* returnValue: true 一个非标准的替代方案（从旧版本的Microsoft Internet Explorer）到Event.preventDefault()和Event.defaultPrevented。
* cancelBubble: false Event.stopPropagation() 以前的别名。通过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件冒泡。
*/
/**
* UIEvent https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
* detail: 1 只读属性，当非零，提供了当前（或下，根据不同的事件），点击数。
* layerX: 184 返回事件相对于当前图层的水平坐标。
* layerY: 184 返回事件相对于当前图层的垂直坐标。
*/
/**
* MouseEvent https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent
* screenX: 305 鼠标指针相对于全局（屏幕）的X坐标；
* screenY: 539 鼠标指针相对于全局（屏幕）的Y坐标；
* clientX: 305 鼠标指针在点击元素（DOM）中的X坐标。
* clientY: 405 鼠标指针在点击元素（DOM）中的Y坐标。
* pageX: 305 鼠标指针相对于整个文档的X坐标；
* pageY: 405 鼠标指针相对于整个文档的Y坐标；
* x: 305 MouseEvent.clientX的别名。
* y: 405 MouseEvent.clientY的别名。
* offsetX: 155 鼠标指针相对于目标节点内边位置的X坐标
* offsetY: 154 鼠标指针相对于目标节点内边位置的Y坐标
*/
/**
* EventTarget https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget
* EventTarget.addEventListener() 在EventTarget上注册特定事件类型的事件处理程序。
* EventTarget.removeEventListener() EventTarget中删除事件侦听器。
* EventTarget.dispatchEvent() 将事件分派到此EventTarget。
*/
/**
* Node https://developer.mozilla.org/zh-CN/docs/Web/API/Node
* EventTarget <- Node
* 属性：
* Node.childNodes 只读 返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是“实时的”意思是，如果该节点的子节点发生了变化，NodeList对象就会自动更新。
* Node.firstChild 只读 返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。
* Node.isConnected 只读 返回一个布尔值用来检测该节点是否已连接(直接或者间接)到一个上下文对象上，比如通常DOM情况下的Document对象，或者在shadow DOM情况下的ShadowRoot对象。
* Node.lastChild 只读 返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。
* Node.nextSibling 只读 返回与该节点同级的下一个节点 Node，如果没有返回null。
* Node.nodeName 只读 返回一个包含该节点名字的DOMString。节点的名字的结构和节点类型不同。比如HTMLElement的名字跟它所关联的标签对应，就比如HTMLAudioElement的就是 'audio' ，Text节点对应的是 '#text' 还有Document节点对应的是 '#document'。
* Node.nodeType 只读 返回一个与该节点类型对应的无符号短整型的值，可能的值如下：ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3
* Node.nodeValue 返回或设置当前节点的值。
* Node.ownerDocument 只读 返回这个元素属于的 Document对象 。 如果没有Document对象与之关联，返回null。
* Node.parentNode 只读 返回一个当前结点 Node的父节点 。如果没有这样的结点,，比如说像这个节点是树结构的顶端或者没有插入一棵树中， 这个属性返回null。
* Node.parentElement 只读 返回一个当前节点的父节点 Element 。 如果当前节点没有父节点或者说父节点不是一个元素(Element), 这个属性返回null。
* Node.previousSibling 只读 返回一个当前节点同辈的前一个结点( Node) ，或者返回null（如果不存在这样的一个节点的话）。
* Node.textContent 返回或设置一个元素内所有子结点及其后代的文本内容。
* 方法：
* Node.appendChild() 将指定的 childNode 参数作为最后一个子节点添加到当前节点。如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。
* Node.cloneNode() 克隆一个 Node，并且可以选择是否克隆这个节点下的所有内容。默认情况下，节点下的内容会被克隆。
* Node.contains() 返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。
* Node.hasChildNodes() 返回一个Boolean 布尔值，来表示该元素是否包含有子节点。
* Node.insertBefore() 在当前节点下增加一个子节点 Node，并使该子节点位于参考节点的前面。
* Node.removeChild() 从当前元素中删除一个子节点，该子节点必须是当前节点的子节点。
*/
/**
* Document https://developer.mozilla.org/zh-CN/docs/Web/API/Document
* EventTarget <- Node <- Document
* 属性：
* Document.body 返回当前文档的 <body> 或 <frameset> 节点。
* Document.contentType 只读 根据当前文档的 MIME Header，返回它的 Content-Type。
* Document.doctype 只读 返回当前文档的文档类型定义（Document Type Definition, DTD）。
* Document.documentElement 只读 返回当前文档的直接子节点。对于 HTML 文档，HTMLHtmlElement 对象一般代表该文档的<html> 元素。
* Document.documentURI 只读 以字符串的类型，返回当前文档的路径。
* Document.head 只读 返回当前文档的 <head> 元素。
* Document.images 只读 返回当前文档中所包含的图片的列表。
* Document.links 只读 返回一个包含文档中所有超链接的列表。
* Document.scripts 只读 返回文档中所有的 <script> 元素。
* Document.scrollingElement 只读 返回对Element滚动文档的引用。
* Document.cookie 返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。
* Document.defaultView 只读 返回一个对（当前） window 对象的引用。
* Document.domain 获取或设置当前文档的域名。
* Document.lastModified 只读 返回文档上次修改的日期。
* Document.location 只读 返回当前文档的 URI。
* Document.readyState 只读 返回当前文档的加载状态。
* Document.title 获取或设置当前文档的标题。
* Document.URL 只读 以字符串形式返回文档的地址栏链接。
* 事件处理程序：
* Document.onfullscreenchange 是一个EventHandler代表fullscreenchange事件引发时要调用的代码。
* Document.onfullscreenerror 是一个EventHandler代表fullscreenerror事件引发时要调用的代码。
* Document.onreadystatechange 表示事件的事件处理代码readystatechange。
* GlobalEventHandlers.onblur 是一个EventHandler代表blur事件引发时要调用的代码。
* GlobalEventHandlers.onfocus 是一个EventHandler代表focus事件引发时要调用的代码。
* GlobalEventHandlers.onchange 是一个EventHandler代表change事件引发时要调用的代码。
* GlobalEventHandlers.onclick 是一个EventHandler代表click事件引发时要调用的代码。
* GlobalEventHandlers.onclose 是一个EventHandler代表close事件引发时要调用的代码。
* GlobalEventHandlers.oninput 是一个EventHandler代表input事件引发时要调用的代码。
* GlobalEventHandlers.oninvalid 是一个EventHandler代表invalid事件引发时要调用的代码。
* GlobalEventHandlers.onkeydown 是一个EventHandler代表keydown事件引发时要调用的代码。
* GlobalEventHandlers.onkeypress 是一个EventHandler代表keypress事件引发时要调用的代码。
* GlobalEventHandlers.onkeyup 是一个EventHandler代表keyup事件引发时要调用的代码。
* GlobalEventHandlers.onload 是一个EventHandler代表load事件引发时要调用的代码。
* GlobalEventHandlers.onloadeddata 是一个EventHandler代表loadeddata事件引发时要调用的代码。
* GlobalEventHandlers.onloadend 是一个EventHandler代表loadend事件发生时（资源加载停止时）将要调用的代码。
* GlobalEventHandlers.onloadstart 是一个EventHandler代表loadstart事件引发时（资源加载开始时）要调用的代码。
* GlobalEventHandlers.onmousedown 是一个EventHandler代表mousedown事件引发时要调用的代码。
* GlobalEventHandlers.onmouseenter 是一个EventHandler代表mouseenter事件引发时要调用的代码。
* GlobalEventHandlers.onmouseleave 是一个EventHandler代表mouseleave事件引发时要调用的代码。
* GlobalEventHandlers.onmousemove 是一个EventHandler代表mousemove事件引发时要调用的代码。
* GlobalEventHandlers.onmouseout 是一个EventHandler代表mouseout事件引发时要调用的代码。
* GlobalEventHandlers.onmouseover 是一个EventHandler代表mouseover事件引发时要调用的代码。
* GlobalEventHandlers.onmouseup 是一个EventHandler代表mouseup事件引发时要调用的代码。
* GlobalEventHandlers.onresize 是一个EventHandler代表resize事件引发时要调用的代码。
* GlobalEventHandlers.onscroll 是一个EventHandler代表scroll事件引发时要调用的代码。
* GlobalEventHandlers.onseeked 是一个EventHandler代表seeked事件引发时要调用的代码。
* GlobalEventHandlers.onseeking 是一个EventHandler代表seeking事件引发时要调用的代码。
* GlobalEventHandlers.onsubmit 是一个EventHandler代表submit事件引发时要调用的代码。
* 方法：
* Document.createAttribute() 创建一个 new Attr object and returns it.
* Document.createDocumentFragment() 创建一个 new document fragment.
* Document.createElement() 创建一个 new element with the given tag name.
* Document.createEvent() 创建一个 event 对象。
* Document.createTextNode() 创建一个 text node.
* Document.getElementsByClassName() 返回具有给定类名称的元素列表。
* Document.getElementsByTagName() 返回具有给定标签名称的元素列表。
* document.getElementById(String id) 返回对所标识元素的对象引用。
* document.querySelector() 按文档顺序返回文档中与指定选择器匹配的第一个Element节点。
* document.querySelectorAll() 返回与指定选择器匹配的文档中所有Element节点的列表。
* document.clear() 在大多数现代浏览器（包括Firefox和Internet Explorer的最新版本）中，此方法无效。
* document.close() 关闭要写入的文档流。
* document.getElementsByName() 返回具有给定名称的元素列表。
* document.getElementsByName() 返回具有给定名称的元素列表。
* 剪贴板事件：
* copy 当用户通过浏览器的用户界面启动复制操作时触发。也可以通过oncopy属性。
* cut 当用户通过浏览器的用户界面发起剪切操作时触发。也可以通过oncut属性。
* paste 当用户通过浏览器的用户界面发起粘贴操作时触发。也可以通过onpaste属性。
* 拖放事件：
* 全屏活动：
* 键盘事件：
* keydown 按下键时触发。也可以通过onkeydown属性。
* keypress 当按下产生字符值的键时触发。 也可以通过属性。onkeypress
* keyup 释放键时触发。也可以通过onkeyup属性。
* 加载和卸载事件：
* DOMContentLoaded
* readystatechange
* 触摸事件：
* touchcancel
* touchend
* touchmove
* touchstart
* 过渡事件：
*/
/**
* ParentNode https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode
* 属性：
* ParentNode.childElementCount 只读 返回一个当前 ParentNode 所含有的后代数量。
* ParentNode.children 只读 返回一个包含 ParentNode 所有后代 Element 对象的动态 HTMLCollection 对象，忽略所有非元素子节点。
* ParentNode.lastElementChild 只读 返回父节点的最后一个 Element 后代，没有时返回 null。
* ParentNode.lastElementChild 只读 返回父节点的最后一个 Element 后代，没有时返回 null。
* 方法：
* ParentNode.append() 在父节点 ParentNode 的最后一个后代后面插入一组 Node 对象或 DOMString 对象。DOMString 对象会以同等的 Text 节点插入。
* ParentNode.prepend() 在父节点 ParentNode 第一个后代前插入一组 Node 对象或者 DOMString 对象。DOMString 对象会以同等的 Text 节点插入。
* ParentNode.querySelector() 返回以当前元素为根元素，匹配给定选择器的第一个元素 Element。
* ParentNode.querySelectorAll() 返回一个 NodeList，表示以当前元素为根元素的匹配给定选择器组的元素列表。
*/
/**
* Element https://developer.mozilla.org/zh-CN/docs/Web/API/Element
* EventTarget <- Node <- Element
* 属性：
* Element.attributes 返回一个与该元素相关的所有属性集合 NamedNodeMap。
* Element.clientHeight 只读 返回Number 表示内部相对于外层元素的高度。
* Element.clientLeft 只读 返回Number表示该元素距离它左边界的宽度。
* Element.clientTop 只读 返回 Number 表示该元素距离它上边界的高度。
* Element.clientWidth 只读 返回Number 表示该元素内部的宽度。
* Element.scrollHeight 只读 返回类型为： Number，表示元素的滚动视图高度。
* Element.scrollLeft 返回类型为：Number，表示该元素横向滚动条距离最左的位移.返回类型为： Number，表示该元素横向滚动条可移动的最大值
* Element.scrollTop 返回类型为：Number ，表示该元素纵向滚动条距离 返回类型为：Number ，表示该元素纵向滚动条可移动的最大值
* Element.scrollWidth 只读 返回类型为： Number ，表示元素的滚动视图宽度。
* Element.tagName 只读 返回String带有给定元素标签名称的。
* 方法：
* Element.getAttribute() 从当前节点检索命名属性的值，并将其作为返回Object。
* Element.getAttributeNames() 返回当前元素的属性名称数组。
* Element.getBoundingClientRect() 返回元素的大小及其相对于视口的位置。
* Element.getClientRects() 返回矩形的集合，这些矩形指示客户端中每行文本的边界矩形。
* Element.getElementsByClassName() 参数中给出类的列表，返回一个动态的 HTMLCollection ，包含了所有持有这些类的后代元素。
* Element.getElementsByTagName() Element.hasAttribute() 返回一个Boolean指示元素是否具有指定属性的指示。
* Element.hasAttributes() 返回一个Boolean指示，指示元素是否具有一个或多个HTML属性。
* Element.insertAdjacentElement() 在相对于调用元素的给定位置的给定位置插入给定元素节点。
* Element.insertAdjacentHTML() 将文本解析为HTML或XML，并将结果节点插入给定位置的树中。
* Element.insertAdjacentText() 在相对于要调用的元素的给定位置处插入给定的文本节点。
* Element.querySelector() 返回第一个Node与相对于元素的指定选择器字符串匹配的字符串。
* Element.querySelectorAll() 返回NodeList相对于元素与指定选择器字符串匹配的节点的。
* ChildNode.remove() 从其父级的子级列表中删除该元素。
* Element.removeAttribute() 从当前节点删除命名属性。
* Element.requestFullscreen() 异步要求浏览器使元素全屏显示。
* Element.scroll() 滚动到给定元素内的一组特定坐标。
* Element.scrollBy() 按给定数量滚动元素。
* Element.scrollIntoView() 滚动页面，直到元素进入视图。
* Element.scrollTo() 滚动到给定元素内的一组特定坐标。
* Element.setAttribute() 设置当前节点的命名属性的值。
* Element.toggleAttribute() 在指定的元素上切换一个布尔属性，如果存在则将其删除，如果不存在则将其添加。
*/
/**
* Attr https://developer.mozilla.org/zh-CN/docs/Web/API/Attr
* EventTarget <- Node <- Attr
* nodeName 使用Attr.name来代替
* nodeType 当前该属性总是返回2，表示ATTRIBUTE_NODE
* nodeValue 使用Attr.value来代替
*/
/**
* Text https://developer.mozilla.org/zh-CN/docs/Web/API/Text
* EventTarget <- Node <- Text
* Text.wholeText 返回一个a，DOMString其中包含在Text逻辑上与此this相邻的所有节点的文本（Node按文档顺序连接）。
*/
/**
* Window https://developer.mozilla.org/zh-CN/docs/Web/API/Window
* Window.scroll() 将窗口滚动到文档中的特定位置。
* Window.scrollBy() 在窗口中滚动给定数量的文档。
* Window.scrollTo() 滚动到文档中的一组特定坐标。
*/
/**
* Screen https://developer.mozilla.org/zh-CN/docs/Web/API/Screen
* window.screen
* Screen.availTop 指定未分配给永久或半永久用户界面功能的第一个像素的y坐标。
* Screen.availLeft 返回屏幕左边边界的第一个像素点
* Screen.availHeight 指定屏幕的高度，以像素为单位，减去操作系统显示的永久或半永久用户界面功能，例如Windows上的“任务栏”。
* Screen.availWidth 返回窗口中水平方向可用空间的像素值。
* Screen.colorDepth 返回屏幕的色彩深度。
* Screen.height 以像素为单位返回屏幕的高度。
* Screen.left 返回从最左边界到当前屏幕的像素值。
* Screen.orientation 返回当前屏幕的转向。
* Screen.pixelDepth 获取屏幕的像素点
* Screen.top 返回最上边界到当前屏幕的像素值。
* Screen.width 返回屏幕的宽度。
*/
/**
* HTMLCollection https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection
* 属性：
* HTMLCollection.length 只读 返回集合当中子元素的数目。
* 方法：
* HTMLCollection.item() 根据给定的索引（从0开始），返回具体的节点。如果索引超出了范围，则返回 null。
* HTMLCollection.namedItem() 根据 Id 返回指定节点，或者作为备用，根据字符串所表示的 name 属性来匹配。根据 name 匹配只能作为最后的依赖，并且只有当被引用的元素支持 name 属性时才能被匹配。如果不存在符合给定 name 的节点，则返回 null。
*/
/** https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList
* NodeList 对象是一个节点的集合，是由 Node.childNodes 和 document.querySelectorAll 返回的。
* 属性：
* NodeList.length NodeList 中包含的节点个数。
* 方法：
* NodeList.item() 返回 NodeList 对象中指定索引的节点，如果索引越界，则返回null。等价的写法是 nodeList[i]，不过，在这种情况下，越界访问将返回 undefined。
* NodeList.entries()
* NodeList.forEach()
* NodeList.keys()
* NodeList.values()
*/
/**
* HTMLCollection 与 NodeList 的区别 https://www.runoob.com/js/js-htmldom-nodelist.html
* HTMLCollection 是 HTML 元素的集合。
* NodeList 是一个文档节点的集合。
* NodeList 与 HTMLCollection 有很多类似的地方。
* NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
* NodeList 与 HTMLCollection 都有 length 属性。
* HTMLCollection 元素可以通过 name，id 或索引来获取。
* NodeList 只能通过索引来获取。
* 只有 NodeList 对象有包含属性节点和文本节点。
* */