Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
If you notice that as I'm mousing over different sections here, it's actually highlighting in the top part of the page. And you can view the DOM, the actual Document Object Model of this page. I can see the document here, start to open that up, and drill down inside it. The DOM is very useful, but it can be a little intimidating at first because you'll realize there is a lot more going on with the DOM than just a few nodes. You quickly see that each node has many more properties than we could cover in this course, but you can view the properties of a particular node.
I'm looking at document right now. I can see if it has any childNodes. Yes, it does. Here is HTML, drill down into that. Does it have childNodes? Yes, it does. It has the head section with a blank line between them, which is technically a TextNode. Open the body. Does it have childNodes? Well, I'd hope so. Yes, it's got div. It's got script. It's got TextNodes itself. And you can also scan to figure out if any of these have properties that you might be interested in. Now one good thing is if you're much happier with HTML, and most people are, at least to begin with, you could drill down into your HTML, say, into the footer and into a footermenu section, find a particular place, say, such as this h3, and then use the Context menu, right-click or Ctrl+Click depending on what operating system you have, and click Inspect in DOM tab and it would drill you down directly into the particular node that you're looking at here, which if I start browsing through, I can even see that this one has childNodes.