14.1.3 Element类型.md

14.1.3 Element 类型

概念

ELement 类型表示元素类型，暴露了访问元素标签名、子节点和属性的能力。

可以直接访问 nodeName 和 tagName 属性来获得元素标签名，这两个元素返回相同的值

div.tagName 实际返回的是大写的 “DIV” 所有进行比较的时候，最好都转换成小写去比较

HTML 元素

HTML 元素都通过 HTMLELEMENT 类型表示，包括直接实例和间接实例，并且继承了 ELement 并增加了一些属性。这些属性可以直接获取访问对应的值。详见 P415表格字典

获取属性

getAttribute()

div.getAttribute('id')

接收一个传参，表示要属性的属性名（需要传标签上实际带的，例如calss），如果给定属性不存在，会返回 null 。

• 这个方法可以访问到元素中的自定义属性，自定义属性建议前缀加 data- 表示这是自定义字段

• 传参不区分大小写

通常直接访问和用此方法会返回相同的值。但是有两种类型的值例外：

1. class属性。通过 getAttribute() 方法访问获取的是一个字符串（也就是类名)， 而直接访问元素的属性会返回一个 CSSStyleDeclaration 对象。
2. 事件处理程序，例如 onclick getAttribute() 方法获取到的是一个字符串形式的源代码，直接访问则是一个JS函数

不难理解，其实 getAttribute() 相当于就是读元素标签里的属性，而直接访问通常会访问到实际执行的代码。

考虑到这两种差异，开发者通常会直接使用对象属性，这个方法一般用于获取自定义值

setAttribute()

div.setAttribute('name', '我是div')

为元素设置一个属性，接收两个传参： 要设置的属性和要设置的值。

它可以设置自定义值，而在 Element 上直接设置自定义属性是无效的。

// 无效
div.data-name = '123'
// 有效
div.setAttribute('data-name', '123')

removeAttrubute()

div.removeAttrubute('name')

移除一个元素的属性，接收需要移除的属性， 会彻底移除属性，而不是仅仅删除值

attributes属性-遍历元素的所有属性

Element 属性是唯一拥有 attributes属性的 DOM 节点类型。

attributes 属性包含了一个叫做 NamedNodeMap 的”实时“集合，主要有下面四种方法：

1. getNamedItem(name)
2. removeNamedItem(name)
3. setNamedItem(node)
4. item(pos)。 返回索引位置pos处的节点

这个属性用的不多，比较实用的是遍历元素的所有属性的方法

function outputAttributes (element) {
  let paris = [];
  for(let i = 0; len = element.length; i < len; i++) {
    const attribute = element.attributes[i];
    paris.push(`${attribute.nodeName}=${attribute.nodeValue}`)
  }
  return paris
}

创建元素

document.createElement('div')

接收一个参数: 要创建元素的标签名，不区分大小写。会自动把 ownerDocument 设置为 document

元素后代

childNodes 属性包含元素所有子节点。如果要遍历某个元素的某种特定子节点，可以加一个 nodeType 的判断。

element 上使用 getElementByid 和在文档中是一样的，不过范围限制在了此元素中。