【javascript】DOM-节点层次-Element类型

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){
        //执行某些操作
    }
}

好好学习