What Is The DOM?

A free video tutorial from Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
Rating: 4.6 out of 5Instructor rating
19 courses
417,523 students
What Is The DOM?

Learn more from the full course

Modern JavaScript From The Beginning

Learn and build projects with pure JavaScript (No frameworks or libraries)

21:42:26 of on-demand video • Updated December 2019

Modular learning sections & 10 real world projects with pure JavaScript
Master the DOM (document object model) WITHOUT jQuery
Asynchronous programming with Ajax, Fetch API, Promises & Async / Await
OOP including ES5 prototypes & ES2015 classes
Learn JavaScript Patterns
Regular expressions, error handling, localStorage & more
English [Auto]
All right, guys. So in this section, we're going to get started with the DOM. Now, up to this point, we've been learning the main fundamentals of JavaScript. We've been doing, you know, working with the console, looking at things like conditionals, variables, arrays. These are the building blocks of the language and they are critical. But now we're going to get to actually use this stuff in combination with the browser, with with the DOM. All right. So what is the DOM? It stands for the document object model, and it's basically a structured representation of an HTML document. It can be thought of kind of as a tree of nodes or elements created by the browser. And when I say node or element, I mean any of the HTML tags, the HTML tag, the body tag, each ones pretty much anything that is in the document. And we can use JavaScript to manipulate these DOM elements or nodes. The DOM is object oriented, meaning that each node has its own set of properties and methods that we can change, we can add, we can remove. You may have seen diagrams like this one right here. Now the browser gives us a window object and inside that we have a document object. And this represents just that, the loaded document or web page. And then we have a root element underneath that, which is the HTML tag and or the HTML element. Then from there we have body tags and we have a head tag and body tag which are actually siblings. You can see they're on the same level in this tree and then in the head we have things like meta tags. We have our title in the body. We have, of course, our output, which is H one tags and links and HTML five semantic header tags, footer tags, things like that. So if you are not too familiar with JavaScript, but you've built HTML pages with some CSS, then this probably looks very familiar. You're just thinking it's an HTML page. But what you probably don't know is that we can manipulate this stuff with JavaScript pretty easily, and there are libraries like jQuery which technically make it a little bit easier, but it's really worth learning how to do this stuff with vanilla JavaScript, especially now with query selector. And you can do things pretty much just as easily as you would with jQuery. As far as DOM selection and manipulation, not using jQuery makes it faster. We don't have the overhead of the extra of the extra library, so it's definitely worth learning. One of the analogies that I like is that when you use jQuery to select elements from the DOM, it's kind of like using a sledgehammer to kill a mosquito. All right, so we won't be using jQuery in this course. It's going to be strictly vanilla JavaScript. Now, what I want to do in the next video is I want to take a look at this object right here, the document object. So this has just a ton of different methods and properties and stuff attached to it. So we're going to just go ahead and console.log. Just a bunch of stuff from this just so we can take a look at what it contains. And then after that, we'll move on to the different ways to select things from the DOM, such as document, get element by ID and using our query selectors, things like that. All right. So I will see you in the next video.