- [Instructor] The purpose of targeting an Element within the DOM, using JavaScript, is to do something with it. Like change the text, change an image reference, change a class name, or ID, or maybe the HTML as a whole. Each of these Elements is its own DOM node, so effectively, an object, and each Element has a long list of properties and methods we can use to interact with it. The Mozilla Developer Network page for Element, gives us a full breakdown of all the available properties and methods for Elements. These properties include tag name, so the Elementtag, attributes, ID, class name, inner HTML, and more.
There are also properties that provide meta information about the Elements, such as scroll top, which tells us how many pixels from the top of the document the Element's top is placed. Most of these properties are read only, and you can see that clearly marked here, in the documentation. But, there are a couple of crucial ones we can write to directly. In the exercise files for this movie, 05_03, you'll find an example site, with some content. Accessing the properties of an Element, within this document is as easy as targeting the Element, with a query selector, like we learned in the previous movie, and then asking for the property.
So, if I want the innerHTML of the text field here, so this is probably an h2, yes it is. An h2 with a class main title . I can go to the console, ask for document, then querySelector, and here I want the class main title and I want the innerHTML property. Hit enter, and what I get in return is the innerHTML, inside the Element itself.
And in this case, that's just the words, Welcome to Moonwalk Manor. If I want the entire Element, including the HTML wrapper itself, I call for the same querySelector, but I call for outerHTML, and here I get the h2, the class main title, and then the text inside, Welcome to Moonwalk Manor, and the closing h2 tag. If I want to change the innerHTML or outerHTML, or any other property, I can do so by simply assigning a new value to it.
So, if I go document, querySelector, main title, innerHTML, equals, and then just put in All your headings are belong to us, and then hit enter, I take over this Element and replace the HTML inside it to whatever I want. The ID property works much the same way. So, if I go into my HTML and find an Element that has an ID, like this one, with the ID Showcase, I can go look for it, document, querySelector, ID, showcase, then grab the ID property and change it to something else, like slideshow.
Go back to the Elements, and here you see my div now has ID slideshow, in place of showcase. For classes, we have two properties. The first one is class name. So, if I go document, querySelector, .masthead, you can see the Element here has two classes, .masthead and .clear, and if I ask for the class name, Property, I get a string in return that contains both of the class names. If instead I want a list of each of the class names, so I can target them individually, I ask for the class list property.
.classList returns the classes, in a DOM token list, which is effectively an array. So now I can access them individually, by their index number. Document, querySelector, .masthead, .classList, square bracket, 1 will give me clear, which is the second class on the list. Now from this, I'm sure you're thinking, Oh, cool! So, I can just set .classList[1] equals and then some new value, and change it.
Uhh...not so fast. If we go back to the documentation for Element, you'll see .classList is read only. To change the value of any item inside .classList, or pretty much all of these other items, like attributes and so on, we need to use methods. That's next.
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 elements