Element类型
Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征：
nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode的值为Document或Element
其子节点可能是Element、Text、CDATASection、EntityReference、ProcessingInstruction或者Comment
要访问元素的标签名，可以使用nodeName属性、也可以使用tagName属性；这两个属性会返回相同的值
1 <div id="myDiv"></div>
可以像下面这样取得这个元素以及标签名
1 var div = document.getElementById('myDiv'); 2 console.log(div.nodeName); //"DIV" 3 console.log(div.tagName == div.nodeName); //true
div.tagName实际上输出的是大写形式，通常转换为小写形式
1 if (element.tagName.toLowerCase() == "div"){//这样最好 2 //在此执行操作 3 }
1、HTML元素
所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。每个HTML元素都存在下列标准特性：
id,元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向
className，与元素的class特性相对应
1 <div title="Body text" lang="en" dir="ltr"></div> 2 3 var div = document.getElementById('myDiv'); 4 console.log(div.id); //myDiv 5 console.log(div.className); //bd 6 console.log(div.title); //BOdy text 7 console.log(div.lang); //en 8 console.log(div.dir); //ltr
当然也可以给他们赋予新值
2、取得特性
操作特性的DOM方法主要有三个：getAttribute()、setAttribute()、removeAttribute()
1 var div = document.getElementById('myDiv'); 2 console.log(div.getAttribute('id'));//myDiv 3 console.log(div.getAttribute('class')); //bd 4 console.log(div.getAttribute('title')); //BOdy text 5 console.log(div.getAttribute('lang')); //en 6 console.log(div.getAttribute('dir'));//ltr
如果给定的名称特性不存在，则返回null;
通过getAttribute()方法也可以取得自定义特性，例如：
1 <div my_special_attribute="hello!"></div> 2 var value = div.getAttribute('my_special_attribute');
任何元素的所有特性，也都可以通过DOM元素本身的属性来访问。不过只有公认的特性才会以属性的形式添加到DOM对象中。
1 <div id="myDiv"align="left"my_special_attribute="hello!"></div>
因为id和align在HTML中是<div>公认的特性，因此该元素的DOM对象中也将存在对应的属性。不过自定义特性my_special_attribute在Safari、Opera、Chrome及Firefox中是不存在的；但IE却会为
自定义特性也创建属性，例如：
1 console.log(div.id) //myDiv 2 console.log(div.my_special_attribute) //underfined(IE除外)
有两类特殊的特性，他们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类就是style,在通过getAttribute()访问时，返回的是css文本，而通过属性来访问他则返回的是一个对象。第二类就是onclick这样的时间处理程序。通过getAttribute()访问时，返回的是相应代码的文本，而通过属性来访问时，则会返回一个JavaScript函数
由于存在这些差别，在通过JavaScript以编程方式操作DOM时，开发人员经常不使用getAttribute()而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法。
3、设置特性
setAttribute()接受两个参数：要设置的特姓名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在则创建改属性并设置相应的值
1 div.setAttribute('id','someOtherId'); 2 div.setAttribute('class','ft');
所有特性都是属性，所以可以直接给属性赋值：
1 div.id = 'someOtherId';不过，像下面这样为DOM元素添加一个自定义的属性，该属性不会自动成为元素的特性
1 div.mycolor = "red"; 2 console.log(div.getAttribute('mycolor')); //null(IE除外)
removeAttribute()用于彻底删除元素的特性：
1 div.removeAttribute('class');4、attribute属性
Element类型是使用attribute属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个“动态”集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法。
getNamedItem(name):返回nodeName属性等于name的节点；
removeNamedItem(name):从列表中移除nodeName属性等于name的节点
setNamedItem(node):向列表中添加节点，以节点的nodeName属性为索引
item(pos):返回位于数字pos位置处的节点
attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。要取得id特性，可以使用以下代码：
1 var id = element.attributes.getNamedItem("id").nodeValue;
以下是使用方括号语法的简写形式：
1 var id = element.attributes["id"].nodeValue = "someOtherId";
调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果一样：直接删除给定名称的特性。他们的唯一区别就是removeNamedItem()返回表示删除特性的Attr节点
以下代码展示了如何迭代元素的每个特性，然后将他们构造成name="value" name="value"这样的字符串格式
1 functionoutputAttributes(element){ 2 var pairs = newArray(), 3 attrName, 4 attrValue, 5 i, 6 ien; 7 8 for(i=0,len=element.attributes.length;i<len;i++){ 9 attrName =element.attributes[i].nodeName; 10 attrValue =elemetn.attributes[i].nodeValue; 11 if(element.attributes[i].specified){ 12 pairs.push(attrName + "="" + attrValue + """); 13 } 14 } 15 return pairs.join(" "); 16 }
5、创建元素
使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。例如创建一个<div>元素。
1 var div = document.createElement("div");
在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocuemnt属性。此时，还可以操作元素的特性，为它添加更多的子节点，以及执行其他的操作
1 div.id = "myNewDiv"; 2 dov.className = "box";
要把这些新元素添加到文档树中可以使用appendChild()、insetrBefore()或者replaceChild()方法。
6、元素的子节点
元素可以由任意数目的子节点和后代节点，不同浏览器在看待这些节点方面存在显著的不同，以下面的代码为例：
1 <ul id="myList"> 2 <li>Item 1</li> 3 <li>Item 2</li> 4 <li>Item 3</li> 5 </ul>
如果是IE累解析这些代码，那么<ul>元素会有3个节点，分别是3个<li>元素。但如果是在其他浏览器中。<ul>元素都会有7个元素，包过3个<li>元素和4个文本节点（表示<li>元素之间的空白符）。
如果像下面这样将元素间的空白符删除，那么所有的浏览器都会返回相同的数目的子节点
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
如果需要通过childNodes属性遍历子节点，那么通常都要先检查一下nodeType属性，如下：
1 for(var i=0;len=element.childNodes.length;i<len;i++){ 2 if(element.childNodes[i]nodeType == 1){ 3 //执行某些操作 4 } 5 }
如果像通过某个特定的标签名取得子节点或后代节点可以使用getElementsByTagName()方法。
1 var ul = documet.getElementById('myList'); 2 var items = ul.getElementsByTagName('li');
要注意的是，这里<ul>的后代中只包含直接子元素。不过，如果它包含更多层次的后代元素，那么各个层次中包含的<li>元素也都会返回。