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 • 16 courses • 278,031 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:23 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 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 dorm. All right. So what is the dorm it stands for the document object model. And it's basically a structured representation of an HMO document. It can be thought of kind of as a tree of nodes or elements created by the browser. OK and when I say node or element I mean in any of the each team all tags each time I'll 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 H team l tag and are the each 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 metal tags we have our title in the body we have of course our output which is you know H-1 tags and links and each team of five semantic header tags for tags things like that. So if you are not too familiar with javascript but you've built each team all pages with some CSSA then this probably looks very familiar. You're just thinking it's an H team l page but what you probably don't know is that we can manipulate this stuff with javascript OK pretty easily and there are libraries like Jay Querrey which technically make it a little bit easier but it's really worth learning how to do this stuff with phenolic javascript especially now with queries selector and you can do things pretty much just as easily as you would with a query as far as Dom selection and manipulation. OK not using J.A.G. 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 a 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 Jay queery 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 logs 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 switches document dot get element by id and using our query selectors things like that. All right. So I will see you in the next video.