DOM_节点层次_Element类型

一、Element类型：

nodeType: 1;

nodeName: 元素名;

nodeValue: null;

parentValue: Document 或者 Element;

var oDiv  = document.getElementById("example");

alert(oDiv.tagName);//"DIV"

alert(oDiv.nodeName);//"DIV"

alert(oDiv.tagName == oDiv.nodeName) //true

HTML始终返回全部大写，XML（XHTML）与源码保持保持一致。可进行以下比较：

if (element.tagName.toLowerCase() == "div") {

    //doing something

}

二、HTML元素：

获取特性：getAttribute() 不区分大小写一般获取自定义特性才用getAttribute();

设置特性：setAttribute() 设置的特性统一转换为小写

var oDiv  = document.getElementById("example");

oDiv.myColor = 'red';

alert(oDiv.setAttribute("myColor")); //null(IE除外)

IE相反会自动创建自定义的特性。

删除特性：removeAttribute() 删除特性值与特性

三、attributes属性：

attributes属性包含一个NameNodeMap 动态集合类数组对象。

1.getNamedItem(name) 返回nodeName属性等于name的节点

2.removeNameItem(name) 移除nodeName属性等于name的节点

3.setNameItem(name) 添加节点

4.item(pos) 节点索引

遍历元素属性列表：

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(" ");

}

1.不同浏览器返回顺序不同

2.IE7— 会返回所有可能的特性包括没有指定的特性以上函数返回指定特性

四、创建元素：

document.createElement() 不区分大小写

IE：使用传入完整的元素标签需转义解决部分iframe问题详细 page 268

五、子节点：

IE：只返回子节点

其他浏览器：返回子节点+文本节点（元素之间的空白符）

秒客网

DOM_节点层次_Element类型

相关文章