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：只返回子节点

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