五、Element
1. Element元素说明
element元素继承关系：element -> Node -> EventTarget
Element类型用于表现XML或HTML元素，提供对元素标签名，子节点及特性的访问。原型链的继承关系为: 某节点元素.__proto__ ->（HTML某元素Element.prototype）->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype。
1 | Object.getOwnPropertyNames(HTMLHtmlElement.prototype) |
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中执行，最好在比较之前进行大小写转化。
1 | document.documentElement.tagName;// "HTML" |
2. HTMLElement元素
所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性：
id元素在文档中的唯一标识符,继承自Element.prototypetitle有关元素的附加说明信息，一般通过工具提示条显示出来,继承自HTMLElement.prototypelang元素内容的语言代码，很少使用,继承自HTMLElement.prototypedir语言的方向，值为ltr或者rtl，也很少使用,继承自HTMLElement.prototypeclassName与元素的class特性对应,继承自Element.prototypeattributes: 继承自Element.prototype。返回一个NamedNodeMap的实例对象。
具体这里查询： HTML DOM 元素对象 菜鸟教程
1 | <div class="tt" title="测试" id="ii">123</div> |
并不是对所有属性的修改都能直观在页面上表现出来。
对id或lang的修改对用户而言是透明不可见的；
对title的修改只会在鼠标移动到这个元素上时才显示出来；
对dir的修改会在属性被重写的那一刻立即影响页面中文本左右对齐方式；
修改className时，如果新类关联了与此前不同的CSS样式那么就会立即应用该样式；
3. 获得特性
每个元素都有一个或多个特性，这些特性的用途是给相应元素或其内容附加信息。元素继承自Element.prototype上的三个属性，它们的功能是**操作特性（不是属性）**的方法：
- setAttribute(‘attr’,’value’)：设置一个特性，如果已存在则替换
- getAttribute(‘attr’)： 获取一个特性的值
- removeAttribute(‘attr’)： 彻底删除元素的特性
1 | <div class="tt" title="测试" id="ii">123</div> |
元素还能通过继承HTML某元素Element.prototype上的一些特性，比如input元素的disabled属性继承自HTMLInputElement.prototype上的disabled，可以通过
.disabled取得或设置值:1
2
3
4
5
6
7
8输入<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。
1
2
3
4
5
6<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’)都代表同一个特性。
1
2
3
4
5
6
7<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>
3.1 两个特殊的特性
虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。
3.1.1 style：用于通过css为元素指定样式
style属性继承自HTMLElement.prototype
- 通过getAttribute()访问返回的**style特性值（在标签中定义的）**中包含CSS文本
- 通过style属性访问返回一个CSSStyleDeclaration类型集合对象，由于style属性是用于以编程方式访问访问元素样式的因此并没有直接映射到style特性,获得的集合中的属性只有已设置的才有值，其余的属性为空字符串即使它们都有默认值。
1 | <style> #one { border: 1px solid; background: green; } </style> |
从上面的结果可以看出，只有在标签上设置了style特性的值才会出现在结果中。
通过.style属性返回的结果是CSSStyleDeclaration类型实例集合，原型链继承关系为：div.style.proto->CSSStyleDeclaration.prototype->Object.prototype
1 | Object.getOwnPropertyNames(CSSStyleDeclaration) |
