From the course: JavaScript: Enhancing the DOM

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Exploring the DOM with DevTools

Exploring the DOM with DevTools

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial Buy for my team

Exploring the DOM with DevTools

“

- [Instructor] Let's explore the DOM using a tool you already have, the browser's developer's tools. At this point, you might not even know that you have this tool, but you do. On a webpage, you can go ahead and Right Click and select inspect, or you can press F12. And this opens the developer tools. These developer tools can actually do a lot and we will only scratch the surface of what it can do in this course. Our most important focus is the element step where we're on right now. This is your playground for the DOM. You can see the structure of the DOM right here. I use this a lot during web development to examine what's going on and to modify HTML elements and change the CSS in real time. One of the things I use a lot is this arrow. I can go ahead and click on this arrow and then hover over the elements in a page and this will bring me directly to where they are in the DOM. You can see they highlighted as soon as I hover for it, so for example, this paragraph, I can go ahead and…

Contents