From the course: JavaScript: Enhancing the DOM (2013)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Changing HTML attributes
From the course: JavaScript: Enhancing the DOM (2013)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
Changing HTML attributes5m 25s
-
(Locked)
Working with restricted attributes2m 49s
-
(Locked)
Detecting data attributes3m 29s
-
Controlling classes with the HTML5 classList3m 21s
-
(Locked)
Targeting the attributes property1m 24s
-
(Locked)
Using text content modifiers3m 42s
-
(Locked)
Modifying elements as text2m 15s
-
(Locked)
-
-
-