【DOM】Node类型之Element类型

本文章所有代码及其内容来自《javascript高级程序设计》，感兴趣的朋友可以购买纸质图书。

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

• nodeType 的值为 1；
• nodeName的值为元素的标签名；
• nodeValue的值为null;
• parentNode 可能是Document或Element。

• 子节点可能是Element、Text、comment、CDATASection、EntityReference、ProcessionInstruction。

  访问标签名（nodeName、tagName）

var div = document.getElementById("div");
alert(div.nodeName == div.tagName);  //true

以上代码中div.tagName输出是“DIV”而不是“div”。在HTML中标签始终是大小，而XML中会与源代码中保持一致，如果不确定自己的脚本将会在HTML还是XML文档中执行，最好是比较值钱将标签名转换为相同的大小写形式。

if(element.tagName == "div"){
//代码
}
if(element.tagName.toLowerCase() == "div"){
//代码
}

所有HTML元素都由HTMLElement类型表示。HTMLElement类型直接继承自Element并添加了一些属性。

• id,元素在文档中的唯一标识符
• title，有关元素的附加说明信息
• lang，元素内容的语言代码
• dir，语言的方向，值为“ltr”(left-to-right从左至右)或”rtl”从右至左。
• className，元素指定的css。

2 取得特性

var div = document.getElementById("div");
alert(div.getAttribute("id"));   //div

<div class="myDiv" my_attribute="hello">
var value = div.getAttribute("my_attribute");  //undefined (IE除外)

3 设置特性

div.setAttribute("id","someId");

//所有特性都是属性，所以直接给属性复制可以设置特性的值
div.id="someOtherID";
div.align = "left";
//下面这样为DOM元素添加一个自定义的属性，该属性不会自动成为元素的特性
div.mycolor = "red";
alert(div.getAttribute("mycolor"));  //null(IE除外)
//删除特性
div.removeAttribute("align");

4 attributes属性
Element属性是使用attributes属性的唯一一个DOM类型。attributes属性中包含一个NamedNodeMap。NamedNodeMap对象拥有下列方法。

• getNamedItem(name) – 范围nodeName属性等于name节点
• removeNamedItem(name) – 移除
• setNamedItem(name) –向列表添加节点，以节点的nodeName属性为索引
• item(pos) – 返回位于数字pos位置的节点

5 创建元素

//创建一个div元素
var div = document.createElement("div");
div.id="myDiv";
div.class="box";
//创建input元素
var input = document.createElement(");

document.body.appendChild(div);

6 元素的子节点

<ul>
<li>item1li>
<li>item2li>
<li>item3li>
ul>

如果是IE解析的话，那么

会有三个子节点。其它的浏览器中，
会有7个元素，包括三个
• 元素和4个文本节点（表示
• 元素之间的空白符）。如果将元素间的空白符删除，那么所有浏览器都会返回相同数目的子节点。

  <ul><li>item1li><li>item2li><li>item3li>ul>

  对于这段代码，

  元素在任何浏览器都会包含3个子节点。如果需要通过childNodes属性遍历子节点，那么不要忘记浏览器之间的区别。也就是执行某项操作至亲，通常都要先检查一下nodeType属性。

  for(var i=0,len=element.childNodes.length; i<len; i++){
      if(element.childNodes[i].nodeType == 1){
      // 执行某项操作
  }
  }