H5 provisions of custom attributes and add custom properties acquired methods

Element attribute so much, how to distinguish a built-in attribute or default attributes?

H5 predetermined data- carrying property has a prefix, such as data-index = "1", then, how to set and retrieve attribute values ​​it, see below.

    <Script> 
        var divele = document.querySelector ( "div"); 
        // we often add custom properties and acquisition 
        divele.setAttribute ( "In Flag",. 1); 
        the console.log (divele.getAttribute ( "In Flag")) ; 

        // attribute so much, how to distinguish a built-in attribute or default attributes? 
        // H5 predetermined data- carrying property has a prefix, such as index-= Data ". 1" 
        divele.setAttribute ( "Data-index",. 1); 
        the console.log (divele.getAttribute ( "Data-index")) ; // better compatibility 
        // H5 new method of acquiring property is worth, element object .dataset.index, dataset is a custom attribute (specification beginning data-) collection 
        console.log (divele.dataset.index); 
        //divele.dataset [ `index`] a second way to obtain object attributes 
        the console.log (divele.dataset [index``]); 
 
        // the question is, if a lot of custom properties to be spliced together it connector ?
        divele.setAttribute ( "Data-name-TEMP"
        console.log(divele.getAttribute("data-temp-name")); //这种方式正常写
        console.log(divele.dataset.tempName);
        console.log(divele.dataset[`tempName`]);
    </script>