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>