From the course: JavaScript: Enhancing the DOM

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Changing HTML attributes

Changing HTML attributes

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial

Changing HTML attributes

Once you select an element, there are a few ways you access the attributes within that tag. The easiest is by using dot notation. So, for example you can access the source attribute of any image by using something like img.src. So usually, dot notation lets you just put the name of the attribute next to the node. These are read and write properties so you can change what an existing image is pointing to if you want. You just add it to a new value. You can even add attributes that don't currently exist in the dot. One thing you have to be careful with is that some attributes, like say the class attribute, are reserved JavaScript words. So, they have to be handled a little bit differently. So, let's take a look at this in an actual document. Just to get started, I want to target this element right here. It's an image inside a list. So, I'm going to pull up the developer tools. And hit Cmd+Option+I, that's Ctrl+Alt+I on the PC, and then I hit the Escape key. I want to get to this…

Contents