DOM Element节点类型详解

上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型，本文我们继续深入，谈谈另一个重要的节点类型 Element 。

1、概况

---

Element 类型用于表现 HTML 或 XML 元素，提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征：

1. nodeType 的值为 1
2. nodeName 的值为元素的标签名
3. nodeValue 的值为null
4. parentNode 可能是 Document 或者 Element
5. 其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或者 EntityReference

要访问元素的标签名，可以用 nodeName 属性，也可以用 tagName 属性；这两个属性会返回相同的值。在 HTML 中，标签名始终都以全部大写表示，而在 XML(有时候也包括 XHTML）中，标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行，最好还是在比较之前将标签名转换成相同的大小写形式：

var myDiv = document.querySelector('div');
console.log(myDiv.tagName);  // DIV
console.log(myDiv.nodeName);  // DIV

if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好，适用于任何文档
  // ...
} 

2、HTML 元素

---

所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性：

1. id 元素在文档中的唯一标识符
2. title 有关元素的附加说明信息，一般通过工具提示条显示出来
3. lang 元素内容的语言代码，很少使用
4. dir 语言的方向，值为 ltr 或者 rtl，也很少使用
5. className 与元素的 class 特性对应

3、特性的获取和设置

---

每个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是 getAttribute() setAttribute() removeAttribute()。

注意，传递给 getAttribute() 的特性名与实际的特性名相同，因此要想得到 class 特性值，应该传入 class 而不是 className，后者只有在通过对象属性（property）访问特性时才用。如果给定名称的特性不存在，getAttribute() 返回 null。

<div id='myDiv' title='hanzichi'> </div>
<script>
  var myDiv = document.querySelector('div');

  // attribute
  console.log(myDiv.getAttribute('id')); // myDiv
  console.log(myDiv.getAttribute('class')); // null
  console.log(myDiv.getAttribute('title')); // hanzichi
  console.log(myDiv.getAttribute('lang')); // null
  console.log(myDiv.getAttribute('dir')); // null

  // property
  console.log(myDiv.id); // myDiv
  console.log(myDiv.className); // ''
  console.log(myDiv.title); // hanzichi
  console.log(myDiv.lang); // ''
  console.log(myDiv.dir); // ''
</script>

通过 getAttribute() 方法也可以取得自定义特性。

在实际开发中，开发人员不常用 getAttribute()，而是只使用对象的属性（property）。只有在取得自定义特性值的情况下，才使用 getAttribute() 方法。为什么呢？比如说 style，在通过 getAttribute() 访问时，返回的 style 特性值包含的是 css 文本，而通过属性来访问会返回一个对象。再比如 onclick 这样的事件处理程序，当在元素上使用时，onclick 特性包含的是 Javascript 代码，如果通过 getAttribute() 访问，将会返回相应代码的字符串，而在访问 onclick 属性时，则会返回 Javascript 函数。

与 getAttribute() 对应的是 setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute() 会以指定的值替换现有的值；如果特性不存在，setAttribute() 则创建该属性并设置相应的值。

而 removeAttitude() 方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

div.setAttribute('id', 'someOtherId');
div.setAttribute('title', 'some other text');

div.removeAttribute('class')

4、attributes 属性

---

Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。 attributes 属性中包含一个 NamedNodeMap，与 NodeList 类似，也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。NamedNodeMap 对象拥有下列方法：

1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
3. setNamedItem(node): 向列表中添加节点，以节点的 nodeName 属性为索引
4. item(pos): 返回位于数字 pos 位置处的节点

attributes 属性中包含一系列的节点，每个节点的 nodeName 就是特性的名称，而节点的 nodeValue 就是特性的值。

// 取得元素的特性值
var id = element.attributes.getNamedItem('id').nodeValue;
var id = element.attributes['id'].nodeValue;

// getAttribute() 也能实现一样功能
var id = element.getAttribute('id');

// 与removeAttribute() 方法相比，唯一的区别是能返回表示被删除特性的节点
var oldAttr = element.attributes.removeNamedItem('id');

// 添加新特性
// 需要传入一个特性节点
element.attributes.setNamedItem(newAttr);

一般来说，由于前面介绍的 attributes 方法不够方便，因此开发人员更多的会使用 getAttribute() removeAttribute() 以及 setAttribute() 方法。

不过如果想要遍历元素的特性，attributes 属性倒是可以派上用场：

<div id='myDiv' title='hanzichi' class='fish'> </div>
<script>
  var myDiv = document.querySelector('div');
  for (var i = 0, len = myDiv.attributes.length; i < len; i++) {
    var attrName = myDiv.attributes[i].nodeName
      , attrValue = myDiv.attributes[i].nodeValue;

    console.log(attrName, attrValue);
  }

  // id myDiv
  // title hanzichi
  // class fish
</script>

5、元素的子节点

---

<ul id='myUl'>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ul>

<script>
  var myUl = document.getElementById('myUl');
  console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
</script>

以上代码，如果是 IE 来解析，那么 <ul> 元素会有 3 个子节点，分别是 3 个 <li> 元素；而如果是其他浏览器解析，则会有 7 个子节点，包括 3 个 <li> 元素 和 4 个文本节点。

如果像下面这样将元素之间的空白符删除，那么所有浏览器都会返回相同数目的子节点：

<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>

<script>
  var myUl = document.getElementById('myUl');
  console.log(myUl.childNodes.length); // 所有浏览器： 3
</script>