1.ele.getAttribute(attributeName);

返回元素的指定属性值，如果元素没有该属性，则返回null

2.ele.setAttribute(attributeName,value);

为元素指定属性设置值，如果没有该属性，则创建该属性，并赋值

3.在IE 7以及更早版本部分属性的设置应使用另外的名称，为了兼容IE

<script>
           dom=(function(){
           var fixAttr={
                  tabindex:'tabIndex',
                  readonly:'readOnly',
                  'for':'htmlFor',
                  'class':'className',
                  maxlength:'maxLength',
                  cellspacing:'cellSpacing',
                  cellpadding:'cellPadding',
                  rowspan:'rowSpan',
                  colspan:'colSpan',
                  usemap:'useMap',
                  frameborder:'frameBorder',
                  contenteditable:'contentEditable'
           },

           //模拟设置attribute,
          div=document.createElement('div');
          div.setAttribute('class','t');

          var supportSetAttr = div.className === 't';

           return {
                   setAttr:function(el, name, val){
                        el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
                   },
                   getAttr:function(el, name){
                        return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
                    }
              }
        })();

        window.onload=function(){
               var mydiv=document.getElementById("d1");
               dom.setAttr(mydiv, 'class', 'bg');
        }
    </script>

在IE 7以及更早版本中，setAttribute('class','fo');能为元素添加class='fo'.

getAttribute('class');能返回fo值，但是为元素添加的类不起作用，应为IE 7及更早版本的类设置用className，而不是class

 4.

getAttribute(attributeName);不仅可以得到元素默认属性值，还能得到自定义属性值

ele.attributeName或者ele['attributeName']只能得到元素默认存在的属性值

5.

var node = ele.getAttributeNode(attributeName)得到属性节点

console.log(node);//name=value的形式
console.log(node.name);

console.log(node.value);
<body>
    <p id="p1" customData="pmx">ppp</p>
    <script>
       var p = document.getElementById("p1");
       var pnode = p.getAttributeNode("customData");
       console.log(pnode)
    </script>
</body>

6.ownerElement返回属性节点所附属的元素

语法:

　　attrObj.ownerElement

 
 

JS之setAttribute和getAttribute的更多相关文章

  1. JavaScript常用的方法和函数（setAttribute和getAttribute ）

    仅记录学习的新知识和示例,无干货. 1.setAttribute和getAttribute          (Attribute:属性) setAttribute:为元素添加指定的属性,并为其赋值: ...

  2. js中setAttribute 的兼容性

    js中setAttribute 的兼容性class和className兼容方法: object.setAttribute("class","content") ...

  3. JS中setAttribute的兼容性问题（摘自leejersey）

    class和className兼容方法: object.setAttribute("class","content") 在IE8.Chrome.火狐.Opera ...

  4. setAttribute()、getAttribute()与ele[attr]与自定义属性

    一.自定义属性设置 1.setAttrbute() var q=document.getElementById("q"); q.setAttribute("index&q ...

  5. InvocationTargetException异常的深入研究-servlet的setAttribute与getAttribute

    在某项目中,前端jsp传入的用户id数据通过session域传入后台servlet进行处理的过程中,无意间出现了InvocationTargetException异常 前端部分代码如下:测试代码,非原 ...

  6. setAttribute 和 getAttribute 的用法

    setAttribute()   是用于设置自定义属性的方法,有两个参数,第一个是属性名,第二个是属性值, 添加时必须用引号括起来: 此时的box就加上了一个自定义属性名和属性值,可以根据需要赋取 g ...

  7. request.getParameter和request.setAttribute/request.getAttribute

    https://blog.csdn.net/ryelqy/article/details/79230513 request.getQueryString https://blog.csdn.net/w ...

  8. 属性attribute和property的区别

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  9. jQuery笔记归纳

      使用jQuery前首先需要导如jQuery包:https://jquery.com/(点击下载按钮,进入后点击鼠标右键另存为即可下载)    例如:<script type="te ...

随机推荐

  1. JavaScript基础知识总结

    正则表达式: 是一种专门用于操作字符串规则. 正则表达式: 通过一些符号来表达,简化对字符串的复杂操作. 弊端:阅读性较差 常见操作: 1.匹配 String matches(regex) 2.获取( ...

  2. hiho#1145 : 幻想乡的日常

    描述 幻想乡一共有n处居所,编号从1到n.这些居所被n-1条边连起来,形成了一个树形的结构. 每处居所都居住着一个小精灵.每天小精灵们都会选出一个区间[l,r],居所编号在这个区间内的小精灵一起来完成 ...

  3. ubuntu apt源

    deb http://archive.ubuntu.com/ubuntu/ vivid main restricted universe multiversedeb http://archive.ub ...

  4. 将textField编辑完内容作为参数发送请求

    将textField编辑完内容作为参数发送请求  首先赋值默认值  其次把编辑完的内容传给model,这样的话,model里面的数据就是编辑完之后的内容了

  5. IOS第六天(3:scrollView 图片轮播器)

    IOS第六天(3:scrollView 图片轮播器) #import "HMViewController.h" #define kImageCount 5 @interface H ...

  6. 完美洗牌&洗牌

    完美洗牌问题,给定一个数组a1,a2,a3,...an,b1,b2,b3..bn,把它最终设置为b1,a1,b2,a2,...bn,an这样的. O(n)的算法,O(n)的空间. 对于前n个数,映射为 ...

  7. C里面的类型字节长度和范围

    32位平台 char 1个字节8位 short 2个字节16位 int 4个字节32位 long 4个字节 long long 8个字节 指针 4个字节 64位平台 char 1个字节 short 2 ...

  8. 对于默认 Windows NT 安装的 SID 值

    https://support.microsoft.com/en-us/kb/163846/zh-cn

  9. cURL 学习笔记与总结（5）用 cURL 访问 HTTPS 资源

    <?php $curlobj = curl_init(); // 初始化 curl_setopt($curlobj, CURLOPT_URL, "https://ajax.aspnet ...

  10. html 实体转换为字符：转换 UEditor 编辑器 ( 在 ThinkPHP 3.2.2 中 ) 保存的数据

    在 ThinkPHP 3.2.2 中使用 UEditor 编辑器保存文章内容时,数据库中保存的数据都被转义成实体,例如:&lt;p&gt;&lt;strong&gt;& ...