H5對自定義屬性的規定和添加獲取自定義屬性的方法

H5對自定義屬性的規定和添加獲取自定義屬性的方法

元素屬性那麼多，如何區分是自帶的屬性仍是默認的屬性呢？

H5規定自帶的屬性有個data- 前綴，如data-index="1"，那麼,如何設置和獲取屬性值呢,請看下文。

<script>
        var divele = document.querySelector("div"); //咱們經常使用的添加和獲取自定義屬性
        divele.setAttribute("flag", 1); console.log(divele.getAttribute("flag")); //屬性那麼多，如何區分是自帶的屬性仍是默認的屬性呢？
        //H5規定自帶的屬性有個data- 前綴，如data-index="1"
        divele.setAttribute("data-index", 1); console.log(divele.getAttribute("data-index")); //兼容性比較好
        //H5新增的獲取屬性值得方法,元素對象.dataset.index， dataset是個自定義屬性（規範的data-開頭）的集合
 console.log(divele.dataset.index); //divele.dataset[`index`] 獲取對象屬性的第二種方式
 console.log(divele.dataset[`index`]); //問題來了,若是自定義屬性被不少鏈接符拼接而成呢？
        divele.setAttribute("data-temp-name", 2); //獲取的時候用駝峯法
        console.log(divele.getAttribute("data-temp-name")); //這種方式正常寫
 console.log(divele.dataset.tempName); console.log(divele.dataset[`tempName`]); </script>