zoukankan      html  css  js  c++  java
  • 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获取,即可成功。相关代码如下:

     1 if ( !getSetAttribute ) {
     2 
     3     //省略...
     4 
     5     // Use this for any attribute in IE6/7
     6     // This fixes almost every IE6/7 issue
     7     nodeHook = jQuery.valHooks.button = {
     8         get: function( elem, name ) {
     9             var ret;
    10             ret = elem.getAttributeNode( name );
    11             return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ?
    12                 ret.nodeValue :
    13                 undefined;
    14         },
    15         set: function( elem, value, name ) {
    16             // Set the existing or create a new attribute node
    17             var ret = elem.getAttributeNode( name );
    18             if ( !ret ) {
    19                 ret = document.createAttribute( name );
    20                 elem.setAttributeNode( ret );
    21             }
    22             return ( ret.nodeValue = value + "" );
    23         }
    24     };
    25 
    26     //省略...
    27 }

    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属性的分析就更全面了。

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

  • 相关阅读:
    [置顶] java 通过classloader加载类再通过classforname实例化
    Linux内核源代码解析——用户发送数据包的起源之sendto
    POJ 2774 Long Long Message&&HDU 1403 Longest Common Substring&&COJ 1203
    add-two-numbers-ii
    【转载】React初学者入门须知
    【Todo】【转载】ES6的学习记录
    【转载】Java中如何写一段内存泄露的程序 & ThreadLocal 介绍和使用
    【Todo】深入理解Javascript系列
    【转载】什么是优秀技术团队
    【转载】React入门-Todolist制作学习
  • 原文地址:https://www.cnblogs.com/wangfupeng1988/p/3639330.html
Copyright © 2011-2022 走看看