What Is The DOM?

Brad Traversy
A free video tutorial from Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
4.7 instructor rating • 17 courses • 338,945 students

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 dorm 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 are elements created by the browser. And when I say node or element, I mean in any of the HTML tags, the HTML tag, the body tag, each one's 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. OK, 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 element. Then from there we have body tags and we have a head tag and body tag which are actually siblings. You can see there 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 H1 tags and links and HTML five semantic header tags for tags, things like that. So if you are not too familiar with JavaScript but you've built HTML pages with some success, 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 Query which technically make it a little bit easier, but it's really worth learning how to do this stuff with Feneley JavaScript, especially now with Query Selector. And you can do things pretty much just as easily as you would with GE query as far as DOMS selection and manipulation. OK, not using GE query makes it faster. We don't have the overhead of the extra the extra library, so it's definitely worth learning. One of the analogies that I like is that when you use GE query 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 GE query 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. OK, 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 doget element by ID and use it in our query selectors, things like that. All right. So I will see you in the next video.