屬性

屬性本身是一個物件（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