(89)Wangdao.com第二十二天_JavaScript 属性

属性

属性本身是一个对象（Attr 对象）

 

• Element.attributes 
  • 返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象

 

• • 属性的实时变化都会反映在这个节点对象上。

 

• • 其他类型的节点对象，虽然也有 attributes 属性，但返回的都是 null，因此可以把这个属性视为元素对象独有的

 

• • 取出每个属性节点对象（不是取属性值）

 

• • 属性节点对象有 name 和 value 属性，对应该属性的属性名和属性值，等同于 nodeName 属性和 nodeValue 属性

    • • // <div id="result" bgcolor="yellow">孙悟空</div>
        
        
        
        var ele = document.getElementById("result");
        ele.innerHTML = ( ele.attributes[0].name+"----"+
                                   ele.attributes[0].value+"<br />"+
                                   ele.attributes[1].name+"----"+
                                   ele.attributes[1].value);                    

      • 

 

• 元素的标准属性
  • 有些 HTML 属性名是 JavaScript 的保留字，
  • 在JavaScript 中使用这些属性时，必须改名

• • • for    属性在使用时为    ele.htmlFor
    • class    属性在使用时为    ele.className

 

• 属性操作的标准方法

适用所有属性

只会返回字符串

只接受标准名称，即 class 就是 "class"，for 属性也可以直接使用

 

• • Element.getAttribute()
    • 返回一个数组，成员是当前元素的所有属性的名字
    • 遍历某个节点的所有属性
      • 方法1

        • var ele = document.getElementById("result");
          var attrs = ele.attributes;
                          
          ele.innerHTML += "<br />";
          var i = 0;
          for(i=0; i<attrs.length; i++){
              ele.innerHTML +=  attrs[i].name+"----"+attrs[i].value+"<br />";
          }

      • 方法2

        • var mydiv = document.getElementById('mydiv');
          
          mydiv.getAttributeNames().forEach(function (key) {
              var value = mydiv.getAttribute(key);
              console.log(key, value);
          })

 

• • Element.setAttribute()
    • 为当前元素节点新增属性
    • 如果同名属性已存在，则相当于编辑已存在的属性
    • 没有返回值

 

• • Element.hasAttribute()
    • 当前元素节点是否包含指定属性

 

• • Element.hasAttributes()
    • 只要有一个属性，就返回 true

 

• • Element.removeAttribute()
    • 移除指定属性
    • 没有返回值

 

• 标准提供的 data-xxx 属性 自定义属性
  • 元素节点对象的 dataset 属性
    • 通过 ele.dataset.foo 读写 data-foo 属性

      • // <div id="mydiv" data-foo="bar">
        
        var n = document.getElementById('mydiv');
        n.dataset.foo;     // 返回 bar
        n.dataset.foo = 'kjf';

 

• • 删除一个 data-* 属性，可以直接使用 delete 命令

    • • var ele = document.getElementById("myDiv");
        delete ele.dataset.foo;

 

• • data-属性名    命名有限制
    • 只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)
    • 属性名不应该使用 A 到 Z 的大写字母
    • 比如不能有 data-helloWorld 这样的属性名，而要写成 data-hello-world

 

• • data-属性名    使用要注意
    • 连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变
    • 反过来，dataset 的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。
    • 比如，dataset.helloWorld 会转成 data-hello-world