js便签笔记（4）——简单说说getAttributeNode()和setAttributeNode()

1.前言：

前两天写过一片《分析dom元素的特性Attribute和属性Property》，分析了特性和属性的区别。那篇文章却忽略了一个主要知识点——getAttributeNode()和setAttributeNode()

近来看《jQuery技术内幕》，今天正好看到jQuery.attr()那一部分，忽然想起来这个方法。就此简单说一说。

 

2.从jQuery说起：

jQuery指出，在IE6、7下，浏览器的getAttribute()和setAttribute()不能正常获取和设置Attribute的值。jQuery做的测试类似于：

div1.className = 'aaa';
alert(div1.getAttribute("className") === 'aaa');

IE6、7下或出现以上情况，即通过正常的 getAttribute("class")获取不到值。

那么在这种情况下，jQuery给出的解决方案是通过getAttributeNode("class").nodeValue获取，即可成功。相关代码如下：

if ( !getSetAttribute ) {

    //省略...

    // Use this for any attribute in IE6/7
    // This fixes almost every IE6/7 issue
    nodeHook = jQuery.valHooks.button = {
        get: function( elem, name ) {
            var ret;
            ret = elem.getAttributeNode( name );
            return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ?
                ret.nodeValue :
                undefined;
        },
        set: function( elem, value, name ) {
            // Set the existing or create a new attribute node
            var ret = elem.getAttributeNode( name );
            if ( !ret ) {
                ret = document.createAttribute( name );
                elem.setAttributeNode( ret );
            }
            return ( ret.nodeValue = value + "" );
        }
    };

    //省略...
}

 

3.如何应用：

3.1 getAttributeNode:

getAttributeNode()用法比较简单，它将返回一个Attr类型的对象，其nodeType === 2

<div id="div1" class="divClass"></div>

var className = div1.getAttributeNode("class").nodeValue;      //'divClass'
var title = div1.getAttributeNode("title");                    // null
var type = div1.getAttributeNode("class").nodeType;            // 2

 

3.2 setAttributeNode:

setAttributeNode()将接收一个Attr类型的对象，Attr类型的对象可用document直接创建：

<div id="div1" class="divClass"></div>

var attr = document.createAttribute("myAttr");
attr.nodeValue = 'wang';
div1.setAttributeNode(attr);

运行以上代码，div1会加上一个“myAttr”的自定义特性:

 

4.最后：

加上对getAttributeNode()和setAttributeNode()的分析，对于html特性和dom属性的分析就更全面了。

各位看官，如有发现问题，请尽管提出！在此谢过！