1、概况
Element 类型用于表现 HTML 或 XML 元素，提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征：
- nodeType 的值为 1
- nodeName 的值为元素的标签名
- nodeValue 的值为null
- parentNode 可能是 Document 或者 Element
- 其子节点可能是 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 元素中都存在下列标准属性：
- id 元素在文档中的唯一标识符
- title 有关元素的附加说明信息，一般通过工具提示条显示出来
- lang 元素内容的语言代码，很少使用
- dir 语言的方向，值为 ltr 或者 rtl，也很少使用
- 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 对象拥有下列方法：
- getNamedItem(name): 返回 nodeName 属性等于 name 的节点
- removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
- setNamedItem(node): 向列表中添加节点，以节点的 nodeName 属性为索引
- 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>Item1</li> <li>Item2</li> <li>Item3</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>Item1</li><li>Item2</li><li>Item3</li></ul> <script> var myUl = document.getElementById(‘myUl‘); console.log(myUl.childNodes.length);// 所有浏览器： 3 </script>