- [Instructor] The attributes property is read-only, just like classList, and attributes have the additional complication of often appearing in attribute value pairs. As an example, the href attribute in links always has a URL value. While we can access the attributes of an element using the attributes property, we need methods to actually work with them, so we can assign attribute names and attribute values separately. Here we have four methods to choose from. Past attribute checks to see if the specified attribute is present, and returns a Boolean for true or false.
Get attribute returns the value of the specified attribute. Set attribute has two arguments, the attribute name and its value, and either changes the value of the specified attribute if it exists or adds a new attribute if none is present. And finally, remove attribute removes the specified attribute. These methods work for all attributes on any element. In the exercise files for this movie, 05_05, you'll find the same site we've been working with so far in this chapter.
If you scroll down a bit, you'll find this CTA section that has a link. I want to use JavaScript to ensure this link opens in a new tab, and that's done using the target attribute and an underscore blank value. To target the element in JavaScript, I first need to look at the DOM tree. Here you see it's a link inside a div, with a class CTA, and right now, this link does not have a target attribute. In my code, I have a js folder and a script.js file underneath it, that's currently empty.
Here I'll start off by setting up a new constant that points at the element we'll be working with. I'll set that to document.querySelector, and here we're targeting .cta a. I'm setting this up as a constant, because we're never going to change what element we'll be working with here, so the value inside these contents should never change. You'll see me do this later on too, when I'm referring to elements within a page.
Now we can use the attributes property to quickly take a look at what attributes are currently applied to this element. Here I'll just refer to my new constant, and then ask for the attributes property. Save that, go back to the browser and the console, and here, we get a NamedNodeMap with an array of all the attributes applied to the current selected element. In this case, the only attribute that's currently applied is the href attribute.
Now we can set up a conditional statement to test whether we have the target attribute, and if not, we'll apply it to the element. So if CTAELEMENT.hasAttribute, this is the method, I'm looking for the target attribute, that's the case, then we'll simply console.log out CTAELEMENT.getAttribute target, and this will give us the value of the target attribute.
If not, so else, we grab CTAELEMENT, again, and setAttribute. Here we provide both the attribute name, target, and attribute value, underscore, blank. Save that, go back to the browser. Now you'll see, the node map has two elements, href and target, and if we go to elements, here, we have a, with href, and target equals underscore blank.
We can also test to make sure our conditional statement works if the target attribute already exists, by going into index.html, scrolling down to the CTA section, which is here, and applying the attribute. And now if I go to console, I also get this console log of the value of that attribute, in this case, underscore blank. Now this example of a target attribute on a link element may seem a little too simplistic, but the reality is, this method for finding attributes on an element and changing them in some way is identical, regardless of what attribute you're working with.
I often use these attribute methods to add or change standard attributes like links and custom data attributes, and you can use them to address any attribute on any element in your entire document. We'll use these methods again to work with attributes later, so you'll get plenty of practice.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Access and change attributes