[TOC]
element元素继承关系：element -> Node -> EventTarget
Element类型用于表现XML或HTML元素，提供对元素标签名，子节点及特性的访问。原型链的继承关系为: 某节点元素.__proto__ ->（HTML某元素Element.prototype）->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype。
Object.getOwnPropertyNames(HTMLHtmlElement.prototype)
// (2) ["version", "constructor"]
Object.getOwnPropertyNames(HTMLElement.prototype)
// (95) ["title", "lang", "translate", "dir", "dataset", "hidden", "tabIndex", "accessKey", "draggable", "spellcheck", "contentEditable", "isContentEditable", "offsetParent", "offsetTop", "offsetLeft", "offsetWidth", "offsetHeight", "style", "innerText", "outerText", "onabort", "onblur", "oncancel", "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onseeked", "onseeking", "onselect", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "ontoggle", "onvolumechange", "onwaiting", "onwheel", "onauxclick", "ongotpointercapture", "onlostpointercapture", "onpointerdown", "onpointermove", "onpointerup", "onpointercancel", "onpointerover", "onpointerout", "onpointerenter", "onpointerleave", "nonce", "click", "focus", "blur", "constructor"]
Object.getOwnPropertyNames(Element.prototype)
// (87) ["namespaceURI", "prefix", "localName", "tagName", "id", "className", "classList", "slot", "attributes", "shadowRoot", "assignedSlot", "innerHTML", "outerHTML", "scrollTop", "scrollLeft", "scrollWidth", "scrollHeight", "clientTop", "clientLeft", "clientWidth", "clientHeight", "onbeforecopy", "onbeforecut", "onbeforepaste", "oncopy", "oncut", "onpaste", "onsearch", "onselectstart", "previousElementSibling", "nextElementSibling", "children", "firstElementChild", "lastElementChild", "childElementCount", "onwebkitfullscreenchange", "onwebkitfullscreenerror", "setPointerCapture", "releasePointerCapture", "hasPointerCapture", "hasAttributes", "getAttributeNames", "getAttribute", "getAttributeNS", "setAttribute", "setAttributeNS", "removeAttribute", "removeAttributeNS", "hasAttribute", "hasAttributeNS", "getAttributeNode", "getAttributeNodeNS", "setAttributeNode", "setAttributeNodeNS", "removeAttributeNode", "closest", "matches", "webkitMatchesSelector", "attachShadow", "getElementsByTagName", "getElementsByTagNameNS", "getElementsByClassName", "insertAdjacentElement", "insertAdjacentText", "insertAdjacentHTML", "requestPointerLock", "getClientRects", "getBoundingClientRect", "scrollIntoView", "scrollIntoViewIfNeeded", "animate", "before", "after", "replaceWith", "remove", "prepend", "append", "querySelector", "querySelectorAll", "webkitRequestFullScreen", "webkitRequestFullscreen", "scroll", "scrollTo", "scrollBy", "createShadowRoot", "getDestinationInsertionPoints", "constructor"]
Object.getOwnPropertyNames(Node.prototype)
// (48) ["ELEMENT_NODE", "ATTRIBUTE_NODE", "TEXT_NODE", "CDATA_SECTION_NODE", "ENTITY_REFERENCE_NODE", "ENTITY_NODE", "PROCESSING_INSTRUCTION_NODE", "COMMENT_NODE", "DOCUMENT_NODE", "DOCUMENT_TYPE_NODE", "DOCUMENT_FRAGMENT_NODE", "NOTATION_NODE", "DOCUMENT_POSITION_DISCONNECTED", "DOCUMENT_POSITION_PRECEDING", "DOCUMENT_POSITION_FOLLOWING", "DOCUMENT_POSITION_CONTAINS", "DOCUMENT_POSITION_CONTAINED_BY", "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC", "nodeType", "nodeName", "baseURI", "isConnected", "ownerDocument", "parentNode", "parentElement", "childNodes", "firstChild", "lastChild", "previousSibling", "nextSibling", "nodeValue", "textContent", "hasChildNodes", "getRootNode", "normalize", "cloneNode", "isEqualNode", "isSameNode", "compareDocumentPosition", "contains", "lookupPrefix", "lookupNamespaceURI", "isDefaultNamespace", "insertBefore", "appendChild", "replaceChild", "removeChild", "constructor"]Element节点实例有以下特征：以下特征均继承自Node.prototype
- nodeType值为1
- nodeName值为元素标签名
- nodeValue值为null
- parentNode可能是Document或Element
- 其子节点可能是Element，Text，Comment，ProcessingInstruction，CDATASection，EntityReference
要访问元素标签名，可以用nodeName（继承自Node.prototype）属性也可用tagName（继承自Element.prototype）属性，这两个属性会返回相同的值。但注意返回的字符串是大写。在HTML中标签名始终以全部大写表示，而在XML中（有时也包括XHTML）标签名则始终会与源码中的保持一致。假如你不确定自己的脚本将会在HTML还是XML中执行，最好在比较之前进行大小写转化。
document.documentElement.tagName;// "HTML"
document.documentElement.nodeName;// "HTML"
document.documentElement.nodeName.toLowerCase();// "html"
document.documentElement.nodeType // 1
document.documentElement.nodeValue // null
document.documentElement.parentNode // #document所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性：
-
id元素在文档中的唯一标识符,继承自Element.prototype -
title有关元素的附加说明信息，一般通过工具提示条显示出来,继承自HTMLElement.prototype -
lang元素内容的语言代码，很少使用,继承自HTMLElement.prototype -
dir语言的方向，值为ltr或者rtl，也很少使用,继承自HTMLElement.prototype -
className与元素的class特性对应,继承自Element.prototype -
attributes: 继承自Element.prototype。返回一个NamedNodeMap的实例对象。
具体这里查询： HTML DOM 元素对象 菜鸟教程
<div class="tt" title="测试" id="ii">123</div>
<script>
var tt = document.getElementById('ii')
tt.id; // 'ii'
tt.title; // "测试"
document.documentElement.lang;// "zh-cn"
tt.dir; // ""
tt.className // "tt"
tt.attributes
// NamedNodeMap {0: class, 1: title, 2: id, class: class, title: title, id: id, length: 3}
</script>并不是对所有属性的修改都能直观在页面上表现出来。
对id或lang的修改对用户而言是透明不可见的；
对title的修改只会在鼠标移动到这个元素上时才显示出来；
对dir的修改会在属性被重写的那一刻立即影响页面中文本左右对齐方式；
修改className时，如果新类关联了与此前不同的CSS样式那么就会立即应用该样式；
每个元素都有一个或多个特性，这些特性的用途是给相应元素或其内容附加信息。元素继承自Element.prototype上的三个属性，它们的功能是**操作特性（不是属性）**的方法：
- setAttribute('attr','value')：设置一个特性，如果已存在则替换
- getAttribute('attr')： 获取一个特性的值
- removeAttribute('attr')： 彻底删除元素的特性
<div class="tt" title="测试" id="ii">123</div>
<script>
var tt = document.getElementById('ii')
tt.getAttribute('id'); // "ii"
tt.setAttribute('title', 'some other text');// 此时title已经改变了
tt.removeAttribute('class'); // 此时已经删除了 class类样式
</script>-
元素还能通过继承HTML某元素Element.prototype上的一些特性，比如input元素的disabled属性继承自HTMLInputElement.prototype上的disabled，可以通过
.disabled取得或设置值:输入<input id="inp" type="text"> <input disabled> <!-- 也可以在标签里写--> <script> var input = document.getElementById('inp'); // <input id="inp" type="text"> input.disabled; // false input.disabled = true; // 此时输入框禁止输入了 </script>
-
HTML5规范对自定义特性做了增强，只要自定义特性以'data-attrName'形式写到html标签中（setAttribute或直接html代码存在均可），在DOM属性中就可通过ele.dataset.attrName形式访问自定义特性。
dataset属性继自HTMLElement.prototype，它的值是DOMStringMap的实例集合，原型链继承关系为：ele.dataset.proto->DOMStringMap.prototype->Object.prototype。
<div id="one" data-aa="a" data-bb="b" data-cc="c">自定义的属性</div> <script> var one = document.getElementById('one'); one.dataset; // DOMStringMap {aa: "a", bb: "b", cc: "c"} one.dataset.aa; // "a" </script>
-
特姓名不区分大小写，getAttribute('id')和getAttribute('ID')都代表同一个特性。
<div id="one" data-aa="a" data-bb="b" data-cc="c">自定义的属性</div> <script> var one = document.getElementById('one'); one.getAttribute('id'); // "one" one.getAttribute('iD'); // "one" one.getAttribute('ID'); // "one" </script>
虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。
style属性继承自HTMLElement.prototype
- 通过getAttribute()访问返回的**style特性值（在标签中定义的）**中包含CSS文本
- 通过style属性访问返回一个CSSStyleDeclaration类型集合对象，由于style属性是用于以编程方式访问访问元素样式的因此并没有直接映射到style特性,获得的集合中的属性只有已设置的才有值，其余的属性为空字符串即使它们都有默认值。
<style> #one { border: 1px solid; background: green; } </style>
<div id="one" style="color:red">style</div>
<script>
var one = document.getElementById('one');
one.getAttribute('style'); // "color:red"
one.style;
// CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
</script>从上面的结果可以看出，只有在标签上设置了style特性的值才会出现在结果中。
通过.style属性返回的结果是CSSStyleDeclaration类型实例集合，原型链继承关系为：div.style.proto->CSSStyleDeclaration.prototype->Object.prototype
Object.getOwnPropertyNames(CSSStyleDeclaration)
// (5) ["length", "name", "arguments", "caller", "prototype"]
Object.getOwnPropertyNames(CSSStyleDeclaration.prototype)
// (10) ["cssText", "length", "parentRule", "cssFloat", "item", "getPropertyValue", "getPropertyPriority", "setProperty", "removeProperty", "constructor"]