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

Element 类型

  • Element 类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。
  • Element 节点具有以下特征:
    • nodeType 的值为1;
    • nodeName 的值为元素的标签名;
    • nodeValue 的值为null;
    • parentNode 可能是Document 或Element;
    • 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection 或
      EntityReference。
  • 要访问元素的标签名,可以使用nodeName 属性,也可以使用tagName 属性。
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类。
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 语言中没有的特性)的值。
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 属性中包含了它的所有子节点,这些子节点有可能是元素、文本节点、注释或处理指令。


  • Item 1
  • Item 2
  • Item 3
  • 如果需要通过childNodes属性遍历子节点,那么一定不要忘记浏览器间的这一差别。在执行某项操作以前,通常都要先检查一下nodeTpye 属性。
for (var i=0, len=element.childNodes.length; i < len; i++){
    if (element.childNodes[i].nodeType == 1){
        //执行某些操作
    }
}
好好学习

你可能感兴趣的