dataset

In this chapter you will learn:

  1. How to access data attributes in HTML element

Data set attributes

You can work with these data-* attributes in the DOM via the dataset property. The dataset property returns an array of values, indexed by the custom part of the name.

<!DOCTYPE HTML> <!--from   j a  va 2  s.c  om-->
<html> 
    <body> 
        <p id="textblock" 
           class="Survey numbers" 
           data-Survey="apple" 
           data-sentiment="like"> 
            This is a test.
        </p> 
        <script> 
            
            var elem = document.getElementById("textblock"); 
            for (var attr in elem.dataset) { 
                document.writeln(attr); 
            } 
            document.writeln("Value of data-Survey attr: " + 
                         elem.dataset["Survey"]); 
        </script> 
    </body> 
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. How to get attribute from HTML element
Home » Javascript Tutorial » HTML Operation
HTMLElement
addEventListener
appendChild
attributes
classList
className
cloneNode
createElement
createTextNode
dataset
getAttribute
getElementsByTagName
hasAttribute
innerHTML
insertAdjacentHTML
insertBefore
isSameNode
outerHTML
onmouseout
onmouseover
removeEventListener