Table of Contents for

The Modern Web

So scripts can get at this data more easily, a simple DOM API is available that uses the dataset property. To get the value of a data attribute, use this property with the key of the attribute you’re querying:

var el = document.querySelector('p');
var id= el.dataset['id'];

Applied to this example markup, the returned result would be 123. You can also update attribute values with dataset:

el.dataset['id'] = 100;

Here’s an example that shows this at work:

var el = document.querySelector('p');
console.log('The ID is',el.dataset['id']);
el.dataset['id'] = 100;
console.log('Now the ID is',el.dataset['id']);

In this example, I perform three operations: first getting the id data, then setting it to 100, then getting it again, and each time logging the results into the console. The resulting output is shown in Figure 2-5.

Figure 2-5. Showing the results of data attribute manipulation with the API in the console

If you use jQuery, interacting with data attributes is even easier (if you don’t know what jQuery is, I’ll explain it in Chapter 5; you can come back to this section after you’ve read it). Use the data() method for getting and setting data values:

var id= $(el).data('id');

This code is analogous to that shown in the previous section and would return the same value, 123.

One big advantage, however, is that, unlike dataset where all results are returned as a string, the data() method also parses the value of the attribute and converts it into the correct type; using the previous example, the type would be a number. But if you change the markup:

<p data-name="Peter">123</p>

And use the data() method again:

var name = $(el).data('name');

The value of the variable name is Peter, and its type is a string.

To see this in action, take a look at the example file data-attributes-jquery.html. In it, I’ve combined the two different data attributes in the same markup:

<p data-id="123" data-name="Peter">Gasston</p>

Using jQuery, I’ve logged each data attribute’s type into the console using JavaScript’s typeof operator:

var el = $('p');
console.log('ID:',typeof el.data('id'));
console.log('Name:',typeof el.data('name'));

The resulting output is shown in Figure 2-6.

Figure 2-6. Finding the type of the results using the jQuery data() method with data attributes

Data attributes are so useful that some companies already take extensive advantage of them. Twitter was quick to adopt them, allowing them to be used as an option for adding a Tweet button to web pages. Certain parameters about the content are stored in a set of predefined attributes:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://broken-links.com" data-via="stopsatgreen">Tweet</a>

By including a call to Twitter’s JavaScript elsewhere on the page, this element is replaced by a Tweet button using the supplied data. Many other social services, such as Facebook, Google+, and LinkedIn, use data attributes in the same way.