An Introduction to the DOM (Document Object Model) in JavaScript

up until now we've worked with console.log to view our code it's time we turned our attention to the document object model or Dom as it's more commonly called in order to interact with content on a web page technically the Dom is an API for HTML as well as XML and SVG and it offers up a web page as a tree of objects as the w3c specs put it with the Dom programmers can build documents navigate their structure and add modify or delete elements and content web browsers use Dom specifications to determine how to display web pages for example when we load a web page in the browser what happens behind the scenes is that the browser is taking the HTML sent from the server and converting it into the Dom then any JavaScript we write will interact with the Dom as an API for the HTML in fact the Dom is language agnostic and we can use other programming languages to interact with it as well not just JavaScript what we end up seeing in the browser is based on the Dom and not just the original HTML source code later on in the course we will look at using the wordpress api to access content from a site in a similar way we're going to look at the Dom API with JavaScript as a way to access and interact with elements from an HTML web page in the document object model everything is made up of nodes these nodes are objects that are then made into trees like other objects nodes can have properties and methods there are a few different HTML related node types and each one has a corresponding number we have the document node number 9 which is the HTML document itself then we have the document type number 10 which handles the doctype element nodes which are quite common are number 1 and represent all of HTML elements on a page then we have text nodes which are text values often found inside of element nodes or as attributes I'll note that this concept of element verse text nodes can be confusing to folks who jump into coding JavaScript without really taking the time to understand the Dom API so we'll revisit these two in depth in coming videos then we have comments which are HTML comments represented by the number 8 and finally for our discussion now we have document fragments represented by the number 11 which can contain a collection of nodes often used for inserting a group of elements or text nodes together into a document to make this all a bit more concrete let's take a basic HTML document and see how it maps to a node tree in different node types we have here an HTML dock with a doctype HTML tag head tag title tag body tag and then a header with some text the paragraph tag with a link inside and then text inside the link and finally everything closing out so very simple something you should be pretty comfortable with if you've ever worked with basic HTML now let's see how this would be illustrated as a Dom tree what we have as the very first element in our tree is of the document type this does not actually correspond with any of our HTML elements or anything we see here but the entire document itself then we have the doctype and then our root element that's going to make up the rest of the page this is our HTML tag that we would see here then we have our head element which is number 1 which is an element tag inside of that we have a title and then inside of the title is the title text so according to the Dom the title tags here opening and closing are one node and then the text that goes inside of it is a separate node then we come over to our body and we see inside of that we have a header again with the header text pointing out once more that these are two different types of nodes in JavaScript the opening and closing element tags will make up the number one element node whereas the text that goes in between it is going to be a child node of that which is the header text finally we have here our paragraph with some text that appears before the link you could see this lorem is going to be represented by this here and then we have our link with the link text as a separate node and finally the text that appears after the link this Epsom here the link also has attributes in the past element attributes were actually nodes in their own right however the specifications for this are changing with dom four and attributes will no longer be nodes in the same way this type of tree visualization of the dom is quite common when you're first learning it but there is nowhere in the browser or otherwise that we can really see a dom represented in this tree like fashion it is possible though to explore the dom in the browser although it looks a little different so in the next video what we'll do is look at the same code but explore it inside the browser using the tool of the web inspector

Channel: Zac Gordon

Views: 59,035

Keywords: JavaScript, DOM, Document Object Model, API, HTML

Id: l-0nPnSvbX8

Length: 5min 57sec (357 seconds)

Published: Sat Oct 14 2017