Javascript高级编程学习笔记（37）—

Element类型

除了Document类型之外，Element类型应该就是web编程中最常用的类型了

Element类型主要用于表现XML、HTML元素，提供对元素标签名、子节点以及特性的访问

特性

nodeType：1

nodeName：元素标签名

nodeValue：null

parentNode：Document、Element

tagName：用于访问元素的标签名（为了清晰，返回的值都是大写的标签名，在进行比较时需注意转换）

HTML元素

Html 元素都使用 HTMLElement 类型（或该类型的子类型）表示

HTMLElement 继承自 Element 类型

相较于Element类型，添加了以下属性

id：元素在文档中的唯一标识符
title：有关元素的附加说明，通常来说是光标移至该元素上提示条的内容
lang：语言代码通常来说很少使用
dir：文本的显示方向 ‘ltr’ 从左至右 ‘rtl’ 从右至左
className：与元素CSS指定的样式类名一致

　以上属性都可以用于取得或修改相应的特性值，也就是说这些属性既可读又可写

并不是所有对元素特性的操作都会在页面上显示出来，上述属性中的id和lang属性的变动对用户来说就是透明的（在改变id不涉及样式修改的情况下）

对dir的修改会在语句执行完成的时候就完成样式的变动

之前提到了html元素都由HTMLElement类型以及其子类型来表示

HTMLElement的子类有：（下面只列举常用元素涉及的子类）

HTMLAnchorElement <a>
HTMLBodyElement <body>
HTMLBRElement <br>
HTMLButtonElement <button>
HTMLHtmlElement <html>
HTMLFormElement <form>
HTMLDiveElement <div>
HTMLHeadingElement <h1>~<h6>
HTMLImageElement <image>
HTMLInputElement <input>
HTMLLabelElement <label>
HTMLMetaElement <meta>
HTMLPreElement <pre>
HTMLSelectElement <select>
HTMLStyleElement <style>
HTMLTableElement <table>
HTMLTableSectionElement <tbody>
HTMLTableCellElement <td>
HTMLTableRowElement <tr>
HTMLUListElement <ul>

上面列举的都是比较常用的元素

这些元素在除了拥有 HTMLElement 的所有属性之外，还拥有许多自己的特性

后面的文章中会讨论其中的一部分元素

PS.关于属性以及的特性的说明

特性操作

这里我们所说的特性在上图中已经进行了说明，若仍有疑惑欢迎留言，但在后续文章不再解释

为了操作元素的特性，DOM为我们提供了以下三个方法

Element.getAttribute('特性名称') //用于获取元素特性，传入要获取的元素特性的字符串，需要注意元素属性与元素特性的区别，如属性为 className 而与之对应的特性为 class,可以获取自定义的特性
- 每个非自定义的特性在DOM对象上都有着与之对应的属性
- 自定义特性虽然可以通过上述方法获取，但是在DOM对象上并不会有与之对应的属性（IE会自动创建）
- style特性在通过方法访问和通过DOM对象的属性访问时会存在区别：
  - 通过方法访问返回CSS文本
  - 通过属性访问返回一个style对象
- onclick特性也存在如下差异：
  - 通过方法访问返回事件处理程序的代码字符串
  - 通过属性访问返回一个事件处理程序（函数）
- 由于上述差异的存在所以在实践中getAttribute通常只用于自定义特性的相关操作
Element.setAttribute('要设置的特性名称'，‘要设置的值’)
- 如果该特性存在，则用第二个参数替换该特性的值，若该特性不存在，则用第二个参数创建该特性
- 通过该方法设置的特性名会被转为小写
Element.removeAttribute('特性名称') 用于彻底删除元素的特性，并不仅仅是删除值

attributes属性

Element类型是唯一一个拥有attribute属性的DOM节点类型

该属性包含一个 NamedNodeMap 该集合与 nodeList 类似，是一个动态的集合

该集合中的每一个元素都是一个 attr 节点

该集合有以下方法

getNamedItem（'节点名称'）返回nodeName为传入参数的节点
removeNamedItem('节点名称') 从集合中移除nodeName为传入参数的节点
setNamedItme(attr节点) 向集合中添加一个attr节点，并以该节点的nodeName作为该节点的索引
item(索引) 返回位于索引处的节点

如获取元素的ID

var id = element.attributes.getNamedItem('id').nodeValue

attributes提供的方法和之前的特性操作等方法没有什么区别

只有removeNamedItem 会返回attr节点，而removeAttribute则不会返回被删除的特性这一点区别

由于attributes提供的方法不够便利所以开发过程中我们更多的时候会使用之前的方法

但是当我们需要遍历元素的特性的时候attributes就能派上用场

以现在流行的MVVM框架VUE为例，如果我们希望自己实现一个类似的框架，那么遍历元素上的指令等操作说白了就是遍历元素的特性

这个时候也就需要用到attributes了

创建元素

使用 document.createElement() 方法则可以创建元素

需要传入创建的元素的标签名，在HTML中该方法不区分大小写，而在XML文档中该方法则需要区分大小写

创建的元素的 ownerDocument 会指向该document对象

但该方法只是创建了元素，而我们还需要将该元素添加到文档树中才能让该元素呈现在页面上

一旦元素添加到文档树中浏览器会立即显示，此后对于该元素的修改都会即时地显示在页面上

元素子节点

元素可以有任意数目的子节点和后代节点

但是有一点需要注意

我们在编写页面时，为了代码的可读性，避免不了需要换行等操作

虽然浏览器并不会将换行显示在页面上，但是当我们对元素的子节点进行遍历的时候，换行符等就会作为文本节点存在于childNode集合中

所以如果我们使用原生的 childNode 来进行子元素的遍历，最好再遍历时判断一下子节点的类型

for (let i = 0,len = element.childNodes.length; i < len ; i++){

    if(element.childNodes[i].nodeType === 1){

        //执行某些操作

    }

}