Element类型
Element类型用于表现XML或HTML元素，提供对元素标签名、子节点及特性的访问，它具有以下特征
nodeType的值为1；
nodeName的值为元素的标签名；
nodeValue的值为null；
parentNode可能是Document或Element；
要访问元素的标签名可以使用nodeName属性或者tagName属性，两者返回相同的值
<div id="myDiv"></div>
var div=document.getElementById("myDiv");
alert(div.nodeName); //"DIV"
在HTML中，标签名始终全部大写，而在XML（有时候也包括XHTML）中，标签名始终与源代码保持一致，可用toLowerCase()转化为小写形式
HTML元素
所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，而是通过它的子类型
HTMLElement类型直接继承自Element并添加了一些属性，每个HTML元素都有下列标准特性：
id，元素在文档中的唯一标识符；
title，附加说明信息，一般通过工具提示条显示出来
lang，元素内容的语言代码，很少使用
dir，语言的方向值为"ltr""rtl"也比较少使用
className，与元素的class特性对应
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
var div=document.getElementById("myDiv");
alert(div.id); //"myDiv"
...
alert(div.dir); //"ltr"（通过特性属性访问）
也可以直接赋值
div.id="someOtherId";
...
div.dir="rtl";
取得特性
var div=document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"（通过getAttribute()访问）
...
alert(div.getAttribute("class")); //"bd" 非"className"
特性不区分大小写，ID与id代表同一个特性，如果给定名称的特性不存在，返回null
getAttribute(一个自定义特性名称); //根据HTML5规范，自定义特性要加前缀data-以便验证
只有公认的（非自定义的）特性才会以属性的形式添加到DOM中，IE会为自定义特性也创建属性
alert(div.my_special_attribute); //undefined(IE除外)
有两类特殊的特性，通过getAttribute()访问和通过特性属性访问返回的值并不一样：
1.style通过getAttribute()访问返回的是特性值中包含的css文本，通过特性属性访问返回一个对象
2.像onclick这样的事件处理程序，通过getAttribute()访问返回的是相应代码的字符串，通过特性属性访问返回一个JavaScript函数
因此开发人员不常使用getAttribute()，只使用对象的属性，只有在取得自定义特性值得情况下才会用getAttribute()方法
设置特性
getAttribute()对应setAttribute()，接收2个参数要设置的特性名和值，若已存在则替换，不存在则创建
div.setAttribute("id","someOtherId");
setAttribute()也可以操作自定义特性，通过这个方法设置的特性会被统一转换为小写形式"ID"变成"id"
自定义属性不会当作元素的特性
div.mycolor="red";
alert(div.getAttribute("mycolor")); //null(IE除外)
最后一个方法removeAttribute(),彻底删除元素的特性
div.removeAttribute("class");
attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型，attributes属性包含一个NamedNodeMap，与NodeList类似，也是一个“动态”的集合，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; //方括号的简写方式
element.attributes["id"].nodeValue="someOtherId"; //设置新属性值
var oldAttr=element.attributes.removeNamedItem("id"); //删除并返回给定名称的特性
element.attributes.setNamedItem(newAttr); //添加新特性
NamedNodeMap对象的这些方法不够方便，不过在遍历是有比较大的用处
attrName=element.attributes[i].nodeName;
创建元素
document.createElement()方法接收一个参数，即要创建元素的标签名，最好小写（HTML不区分大小写，XML则区分大小写）
var div=ocument.createElement("div");
还可以为它添加更多特性
div.id="myNewDiv";
div.className="box";
这些新元素尚未添加到文档树中
元素的子节点
<ul id="myList">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
在IE中算3个子节点，其他浏览器中算7个子节点，<li>之间的空格算4个文本节点，实际项目中注意这个差别，可以检查一下nodeType==1，另外元素也支持getElementsByTagName()方法
JavaScript高级程序设计24.pdf,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/sdgjytu/p/3751947.html
