ELement 类型用于边线 XML 或 HTML 元素，提供了对元素标签名、子节点及属性的访问。

1. 特征

  • nodeType：1

  • nodeName；元素大写标签名

  • nodeValue：null

  • parentNode：Document 或 Element 类型

要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性，会返回相同的值。

2. HTML 元素

所有的 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过其子类型来表示。

HTMLElement 类型直接继承自 Element 类型并添加了一些属性。

  • id：元素在文档中的唯一标识符

  • title：有关元素的附加说明信息，一般通过工具提示条显示出来

  • lang：元素内的语言代码，很少使用

  • dir：语言的方向，值为 'ltr' 或 'rtl'（从左到右或从右到左），很少使用

  • className：与元素的 class 属性对应，即为元素指定 CSS 类。

这些属性都可以用来获取或者修改相应的属性值。

3. 操作特性

每个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法有三个：getAttribute、setAttribute、removeAttribute。这三个方法可以针对任何特性使用，包括那些以 HTMLElement 类型属性的形式定义的特性。

3.1 getAttribute 获取

传递给 getAttribute 的特性名与实际的特性名相同，因此要想得到 class 特性值，必须传入 class 而不是 className，后者只有通过对象属性来访问。如果不存在，返回 null

通过 getAttribute 也可以获取自定义特性的值，属性的名称不区分大小写。另外，根据 HTML5 规范，自定义特性应该加上 data- 前缀以便验证。

任何元素的所有特性都可以通过 DOM 元素本身的属性来访问。只有公认的属性才会以属性的形式添加到 DOM 对象中，而自定义特性，只有通过添加前缀 data- 才能被添加到 DOM 对象的 dataset 属性中。

有两类特殊的特性，虽然有对应的属性名，但是属性值与通过 getAttribute 返回的值并不相同。

第一类就是 style，用于通过 CSS 为元素指定样式。在通过 getAttribute 访问时，返回的是 CSS 文本，而通过属性来访问时，返回的是一个对象。因为 DOM 的 style 属性是用于以编程方式访问元素的样式的。

第二类是 onclick 这类的事件处理程序。当在元素上使用时， onclick 属性值是 JavaScript 代码，如果通过 getAttribute 返回的是代码字符串，而通过属性访问时，则返回一个函数。这是因为 onclick 及其它事件处理程序属性本身就应该被赋予函数值。

3.2 setAttribute 设置

接受两个参数：特性名和特性值。如果特性已经存在，则替换其值，不存在则创建并赋值。

通过 setAttribute 方法既可以操作 HTML 特性，也可以操作自定义特性。通过这个方法设置的特性名会被转换为小写形式。

因为所有的特性都是属性，所以直接给属性赋值可以设置特性的值。

  1. div.id = 'someId'

为 DOM 元素添加一个自定义属性，该属性不会自动成为元素的特性。

  1. div.myColor = 'red';
  2. console.log(div.getAttribute('myColor')); //null