In this tutorial, you will learn how to work with HTML attributes using JavaScript.

Table of Contents

You can skip to a specific section of this JavaScript tutorial using the table of contents below:

• What Are HTML Attributes?
• How to Modify HTML Attributes Using JavaScript
• Data Attributes in JavaScript
• Final Thoughts

What Are HTML Attributes?

HTML attributes are anything that is passed into the HTML tag along with the tag type.

Examples of HTML attributes include:

• HTML classes
• HTML IDs
• src and alt attributes for HTML images

We'll learn how to modify HTML attributes using JavaScript in the next section.

How to Modify HTML Attributes Using JavaScript

HTML Attributes can be modified using the dot operator, just like attributes of any other JavaScript object.

As an example, let's consider the <img> tag that is included at the bottom of our index.html file.

Since it's the first image included on our webpage, we can easily select the image using the querySelector method like this:

imageVariable = document.querySelector('img');

The actual image that is rendered to the page from this <img> tag is specified using the tag's src attribute. Accordingly, we can modify the image that appears by changing the value of imageVariable.src.

Take a moment to navigate to Google Images and find an image that you'd like to add to our webpage. Once you've identified an image, grab it's URL by right-clicking and selecting "Copy Image Address". Here's the URL I've selected (which is a picture of Michael Jordan, if you're curious):

https://www.nba.com/images/cms/2020-03/michael-jordan-iso-archive-blazers.jpg?cw=1920&w=2051&x=96&ch=1080&h=1367&y=251

We can replace my image with the new image by running the following JavaScript statement:

imageVariable.src = 'https://www.nba.com/images/cms/2020-03/michael-jordan-iso-archive-blazers.jpg?cw=1920&w=2051&x=96&ch=1080&h=1367&y=251'

Data Attributes in JavaScript

Adding new attributes to HTML elements can sometimes introduce bugs if you assign a value to an attribute that is non-standard.

For example, I may want to add some characteristics to the <img> tag to show that its image was taken from Google Images. However, setting src=GoogleImages will break the <img> tag since the src attribute is meant to hold the URL where the file is uploaded at.

What is the solution to this problem?

Data attributes.

Data attributes allow you to create element attributes that have no meaning by default in HTML. These variables are meant to hold data that we, the developers, are using in some custom way.

Data attributes always start with data-, which tells HTML not to use them in any of its default functionality.

In this case, a useful way to store the source of our image would be to set data-image-source="Google Images". Data attributes are typically added in the index.html file of a webpage, so we could create this data-image-source attribute as follows:

<img src = "[/images/headshot.jpg](/images/headshot.jpg)" data-image-source="Google Images">  

If you have an HTML element with multiple data attributes, you can easily access them by calling the dataset attribute, like this:

imageVariable.dataset

This returns a list of all of the data attributes that are applied to an element, similar to how the classList returns a list of all the CSS classes applied to an HTML element.

Final Thoughts

In this tutorial, you learned how to modify HTML attributes using JavaScript.

Here is a brief summary of what we discussed in this lesson:

• Examples of HTML attributes
• How to select HTML attributes using the dot operator
• How to modify HTML attributes using the = assignment operator
• What data attributes are, and how you can use them to prevent bugs in your code