(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