Element 类型
- Element 类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
- Element 节点具有以下特征：
- nodeType 的值为1；
- nodeName 的值为元素的标签名；
- nodeValue 的值为null；
- parentNode 可能是Document 或Element；
- 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection 或
EntityReference。
- 要访问元素的标签名，可以使用nodeName 属性，也可以使用tagName 属性。
<div id="myDiv"></div>
var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true
- 在HTML 中，标签名始终都以全部大写表示；而在XML（有时候也包括XHTML）中，标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在HTML 还是XML 文档中
执行，最好是在比较之前将标签名转换为相同的大小写形式。
if (element.tagName == "div"){ //不能这样比较，很容易出错！
//在此执行某些操作
}
if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）
//在此执行某些操作
}
1、html元素
- HTMLElement 类型直接继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性。
- id，元素在文档中的唯一标识符。
- title，有关元素的附加说明信息，一般通过工具提示条显示出来。
- lang，元素内容的语言代码，很少使用。
- dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），也很少使用。
- className，与元素的class 特性对应，即为元素指定的CSS类。
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"
//修改对应的每个特性
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";
2、获取特性
- 操作特性的DOM方法主要有三个，分别是
getAttribute()、setAttribute()和removeAttribute()。
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"
- 通过getAttribute()方法也可以取得自定义特性（即标准HTML 语言中没有的特性）的值。
<div id="myDiv" my_special_attribute="hello!"></div>
var value = div.getAttribute("my_special_attribute");
- 只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中。
alert(div.id); //"myDiv"
alert(div.my_special_attribute); //undefined（IE 除外）
alert(div.align); //"left"
3、设置特性
-
setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()则创建该属性并设置相应的值。
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");
-
removeAttribute()，这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。
div.removeAttribute("class");
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就是特性的值。
//取得元素的id 特性
var id = element.attributes.getNamedItem("id").nodeValue;
//简写形式
var id = element.attributes["id"].nodeValue;
//设置特性的值
element.attributes["id"].nodeValue = "someOtherId";
//直接删除具有给定名称的特性
var oldAttr = element.attributes.removeNamedItem("id"); //id='xxx'
//为元素添加一个新特性
element.attributes.setNamedItem(newAttr);
- attributes 的方法不够方便，因此开发更多会使用getAttribute()、removeAttribute()和setAttribute()方法。
- 如果想要遍历元素的特性，attributes属性倒是可以派上用场，在需要将DOM结构序列化为XML 或HTML 字符串时，多数都会涉及遍历元素特性。
/**迭代元素的每一个特性，然后将它们构造成name="value" name="value"这样的字符串格式。**/
function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for (i=0, len=element.attributes.length; i < len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
if (element.attributes[i].specified) {
pairs.push(attrName + "=\"" + attrValue + "\"");
}
}
return pairs.join(" ");
}
5、创建元素
- 使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。
var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
document.body.appendChild(div);
6、元素的子节点
- 元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的
childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。
<!--如果是IE 来解析这些代码，那么<ul>元素会有3 个子节点，分别是3 个<li>元素。-->
<!--如果是在其他浏览器中，<ul>元素都会有7 个元素，包括3 个<li>元素和4 个文本节点-->
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul >
- 如果需要通过childNodes属性遍历子节点，那么一定不要忘记浏览器间的这一差别。在执行某项操作以前，通常都要先检查一下nodeTpye 属性。
for (var i=0, len=element.childNodes.length; i < len; i++){
if (element.childNodes[i].nodeType == 1){
//执行某些操作
}
}
好好学习
