Transcript

          
        
          So then my friends, the document object model or the Dom for short.

          It's at the heart of any kind of web page manipulation.
          
          But what exactly is it?
          
          Well, it's something created by the browser when an HTML document loads inside it.
          
          Now, ultimately, what we want to do is interact with the HTML document from our JavaScript code to
          
          do things like change or add or remove content.
          
          So once the document, the HTML document is loaded in the browser, the browser creates an object which
          
          models this document.
          
          And this object is called the document object.
          
          Now it contains many different properties about the HTML document and many different methods that we
          
          can use to interact with the HTML document.
          
          So whenever we want to do something like remove an element from a browser or respond to a user clicking
          
          a button or add something to the browser, what we do is we do that via the document object.
          
          Now we can see this document object in action.
          
          If we just open up the console in a browser window.
          
          So then in a browser, if you open up the console, we can just come down here and type document and
          
          press enter and we're going to get this document object.
          
          Remember, this document object is created by the browser and it models the HTML page.
          
          So if we expand this, you're not going to see what you probably expect and we're not going to see different
          
          methods and properties available to us on this object.
          
          Instead, inside the console, what we see is a visual representation of the HTML page with all the
          
          different elements so we can expand each one of these and look inside them.
          
          Now if we go to elements, it looks very much like this thing over here with all the different elements
          
          that we can expand.
          
          So that's what we see.
          
          If we type the document object out inside the console.
          
          Now we do have access to a load of different properties and methods on this document object.
          
          And if we just say document and then dot, we can scroll through all of these different things, right
          
          here and you can see there's absolutely tons of things we can use.
          
          So for example, I could say document dot, location and press enter and we get this information back
          
          about the location, which includes an href right here.
          
          And if I say documents dot and I'm going to go to URL, then we just get back the URL which is up here.
          
          Okay.
          
          So there's loads of different properties.
          
          Also we can use methods like document dot, get element by ID or by class name or by name or tag name,
          
          etcetera.
          
          So there's loads of different methods we can use as well.
          
          So programmatically, the document over here is modeled by this document object created by the browser
          
          and inside our JavaScript code over here, when we start to code, we have access to that document object
          
          and we can use it to interact with the HTML pages using those different properties and methods.
          
          But the Dom also describes how a document looks in a visual way too, and having an understanding of
          
          that is going to help us a lot when we come to interact with it.
          
          So the document object model describes our HTML page as a hierarchical tree of nodes.
          
          So if you think about an HTML page, it has all these different tags in it and at the top of the page,
          
          at the root of the page, we have this HTML tag and everything else is inside that.
          
          Then inside that, we have a head tag and a body tag and maybe inside the head.
          
          We have a title and some other things inside the body.
          
          We could have an H1 div, a div inside one of the divs, some tags and so forth.
          
          The document object model sees our HTML page as this hierarchical tree of nodes, and each one of these
          
          elements is considered a node in the Dom.
          
          Now this one right here, because it's the very top element inside our document.
          
          It's called the Root Node.
          
          Now inside the title, inside the H1 and the P, we might have some text.
          
          Now they are also considered nodes.
          
          These are text nodes and these are element nodes.
          
          So the idea is that if we want to interact with a web page, we'd use the Dom to reach into this tree
          
          of nodes and we get a reference to a particular node, for example, the H1 right here.
          
          So say we've got a reference now to the H1.
          
          We can use some different methods on that reference to change its content or change its style or remove
          
          it or do something else with it.
          
          So that's the general premise.
          
          So I'd like you to keep this picture of the Dom in your mind, because it will help when we start to
          
          talk about the relationship between nodes and traversing from one element to another.
          
          So now we have a rough idea as to what the Dom is, and we know we can use the built in document object
          
          to interact with the web page.
          
          Let's kick on by seeing how we can reach into the Dom and actually select elements and get a reference
          
          to them.