【JavaScript学习】DOM：Element类型

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

Element节点特征

• nodeType的值是1；
• nodeName的值为元素的标签名；
• nodeValue的值为null；
• parentNode的值可能是Document或Element；
• ownerDocument的值为null；
• 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDataSection或EntityReference。

在HTML中，标签名始终都以全部大写表示；而在XML中，标签名则始终会与源代码中的保持一致。所以最好在比较之前将标签名转换为相同的大小写形式：

if(element.tagName == 'div'){ //不能这样比较，很容易出错！
}

if(element.tagName.toLowerCase() == 'div'){ //这样最好（适用于任何文档）
}

HTML元素

特性（属性）

每个元素都有一或多个特性，用于给出相应元素或内容的附加信息。
例如：

• id，元素在文档中的唯一标识符
• title，有关元素的附加说明信息，一般通过工具提示条显示出来
• lang，元素内容的语言代码，很少使用
• dir，语言的方向，很少使用
• className，与元素的class特性对应，即为元素指定的CSS类。没有将这个属性命名为class，是因为class是 ECMAScript 的保留字。

上述属性都可以用来取得或修改相应的特性值。

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

<script type="application/javascript">
    var div = document.getElementById("myDiv");

    //获取元素中指定的所有信息
    alert(div.id);
    alert(div.className);
    alert(div.title);
    alert(div.lang);
    alert(div.dir);

    //也可以修改对应的每个特性：
    div.id = "someOtherId";
    div.className = "ft";
    div.title = "some other text";
    div.lang = "fr";
    div.dir = "rtl";
</script>

操作特性的DOM方法：getAttribute()、setAttribute()、removeAttribute()。

取得特性：getAttribute()

如果给定的属性不存在，getAttribute()返回null。

var div = document.getElementById("myDiv");
console.log(div.getAttribute("id"));      //myDiv
console.log(div.getAttribute("class"));   //bd
console.log(div.getAttribute("title"));   //Body text
console.log(div.getAttribute("lang"));    //en
console.log(div.getAttribute("dir"));     //ltr

注意：传递给getAttribute()的属性名与实际的属性名要相同。

有两类特殊属性，它们虽然有对应的属性名，但属性的值和通过getAttribute()返回的值并不相同。
第一类特性：style，用于通过CSS为元素指定样式。通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个对象。
第二类特性：onclick这样的事件处理程序。当在元素上使用时，onclick特性中包含的时JavaScript代码，如果通过getAttribute()访问，则会返回相应代码的字符串，而访问onclick属性时，则会返回一个JavaScript函数（如果未在元素中指定相应特性，则返回null）。

由于存在这些差别，因此开发人员不经常使用getAttribute()，而只使用对象的属性。

设置特性：setAttribute()

/*
 * setAttribute()
 * param:
 *     param1——要设置的特性名
 *     param2——要设置的值
 * 如果特性已存在则会以指定的值替换现有的值；如果特性不存在，则创建该属性并设置相应的值。
 */
 var div = document.getElementById("myDiv");
 div.setAttribute("id","someOhterId");
 div.setAttribute("class","ft");
 div.setAttribute("title","some other");
 div.setAttribute("lang","fr");
 div.setAttribute("dir","rtl");

删除特性：removeAttribute()

用途：彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

attributes属性

Element类型是使用attribute属性的唯一一个DOM节点类型。
attribute属性中包含一个NamedNodeMap，与NodeList类似，也是一个“动态”的集合。元素的每一个特性都有一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。

NamedNodeMap对象方法

• getNamedItem(name)：返回nodeName属性等于name的节点；
• removeNamedItem(name)：从列表中移除nodeName属性等于name的节点；
• setNameItem(node)：向列表中添加节点，以节点的nodeName属性为索引；
• item(pos)：返回位于数字pos位置处的节点

attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。

var element = document.getElementById("myDiv");

//取得元素id的特性
var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;

//设置特性的值
element.attributes["id"].nodeValue = "someOtherId";

//直接删除具有给定名称的特性,返回表示被删除特性的Attr节点。
var oldAttr = element.removeAttribute("id");
var oldAttr = element.attributes.removeNamedItem("id");

//为元素添加一个新特性，要传入一个特性节点（不常用）
element.attributes.setNamedItem(newAttr);

attributes的方法不够方便，因此开发人员更多的会使用getAttribute()，setAttribute()和removeAttribute()。

遍历元素的特性

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;
        //IE7及更早的版本会返回HTML元素中所有可能的特性，包括没有指定的特性。
        //因此要加个判断：
        //   specified——true：在HTML中制定了相应特性或通过setAttribute()方法设置了特性。false——未设置特性。
        if(element.attributes[i].specified){
            pairs.push(attrName+"=\""+attrValue+"\"");
        }
    }
    return pairs.join(" ");
}

创建元素：document.createElement()

参数：要创建的标签名。这个标签名在HTML文档中不区分大小写，在XML文档（包括XHTML），区分大小写。

var div = document.createElement("div");
//创建新元素的同事，也为新元素设置了ownerDocument属性。
//此时，可以操作元素的特性，为它添加更子节点，及执行其他操作
div.id = "myNewDiv";
div.className = "box";

//在新元素上设置这些特性只是给它们赋予了相应的信息。这些元素并未添加到文档树中，因此不会影响浏览器的显示。
//可以使用appendChild()、insertChild()、replaceChild()添加到文档树中。
document.body.appendChild(div);

元素的子节点

元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素，文本节点，注释或处理指令。