Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript and the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What is the DOM?

5:33 with Guil Hernandez

The DOM (Document Object Model) is an object-based representation of a web page that JavaScript can use to access and change different parts of the web page.

Further Reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    JavaScript runs and can be found in many places or environments these days, but 0:00
    the most common environment is the browser. 0:05
    Every browser has a built-in JavaScript engine that reads, understands, and 0:08
    runs the instructions in a JavaScript program. 0:12
    The browser environment provides ways to access and 0:14
    change different parts of the web page with JavaScript. 0:17
    Understanding how that works requires an understanding of the DOM or 0:20
    Document Object Model. 0:24
    You've learned that almost everything in JavaScript is an object or 0:27
    can be treated as an object. 0:31
    JavaScript objects can have properties which define their characteristics. 0:34
    Properties of objects can also be accessed or set in the programs we write. 0:38
    Objects also have methods or properties in an object that are functions. 0:43
    Methods allow actions to be performed on the object. 0:47
    For example, when the log method is called on the console object, 0:51
    you can log a message to the browser's console. 0:55
    The DOM is an object based representation of a webpage with its own built in 0:58
    properties and methods, which can be read and modified with JavaScript. 1:02
    This is what allows developers to program a web page using JavaScript. 1:07
    The DOM represents a web page or HTML document as a tree-like structure. 1:11
    In a typical HTML document, there's an HTML head and body element. 1:17
    Nested inside those are other elements. 1:23
    For example, the head contains a title element. 1:26
    The body might contain heading, paragraph and UL elements to name a few, 1:29
    and a UL element would have LI elements inside. 1:34
    These elements can all be thought of as being in a tree called the document tree. 1:38
    Just about every element or 1:43
    item within this document tree is referred to as a node. 1:45
    Don't worry too much about the word node for now. 1:49
    Just know that a node is like a regular JavaScript object and 1:52
    that there can be different types of nodes in this tree. 1:56
    For example, HTML tags are element nodes and 1:59
    any text or content are called text nodes. 2:04
    Notice how the DOM tree resembles a family tree. 2:08
    In fact developers describe the relationship between DOM nodes 2:11
    in family like terms. 2:16
    The HTML element is the root node of the tree, and 2:18
    is the parent of the head and body nodes. 2:21
    The body is the parent of the H1, P, and UL nodes. 2:24
    The LI nodes are all children of the UL node. 2:29
    And the LI nodes are siblings of each other, just like the head, and 2:33
    body are siblings. 2:36
    Text nodes, the text or content inside elements are the most deeply nested 2:38
    nodes in the tree and they do not contain other nodes. 2:43
    The browser converts the structure and content of an HTML 2:47
    document into this tree-like object model that allows JavaScript to read and 2:51
    manipulate the page's content, structure and styles. 2:56
    As you'll soon learn, JavaScript uses these family relationships and 2:59
    this tree-like model for understanding and altering the structure of webpages. 3:04
    So what does the DOM actually look like? 3:09
    If the DOM is made up of HTML elements, is the DOM the source HTML of your web page? 3:12
    Well, not quite. 3:18
    So let's dive a little deeper into this concept. 3:19
    I'm on a web page now, 3:23
    which just happens to be a helpful JavaScript reference on MDN Web Docs. 3:24
    Right or Ctrl Clicking on the page, lets me view the pages source HTML. 3:29
    Even though the DOM gets created from your source HTML, 3:34
    what's shown here is not exactly, the DOM. 3:38
    This is the static HTML that's usually sent by the server and 3:41
    loaded by the browser. 3:45
    However, this is what's parsed by the browser and turned into the DOM. 3:47
    When the browser loads a document, like this source code, 3:52
    all the HTML tags are converted into objects and 3:55
    put into that tree-like structure I showed you earlier. 3:58
    And the DOM itself is a whole lot smarter and 4:02
    more dynamic than this static source code. 4:04
    It's a living model of nodes in that tree-like structure. 4:07
    The DOM can automatically fix errors in the source code. 4:11
    For example, if you omit essential tags required in the document, 4:14
    like the head and body of a page, the DOM will correct that for you automatically. 4:18
    The DOM also allows you to dynamically change and 4:24
    add content and new elements to the document with JavaScript. 4:27
    A visual and more accurate representation of the DOM is what you see when you 4:31
    inspect your page using the browser's developer tools. 4:35
    In Chrome, for example, you'll find the developer tools in the top 4:39
    right menu by going to More Tools then clicking Developer Tools. 4:43
    In the elements panel, any existing elements and any nodes you change or 4:49
    add to the page with JavaScript will show up here, 4:54
    as well as any of the document corrections I just talked about to make your HTML 4:57
    valid, like add missing head and body tags. 5:02
    So here for example is the root HTML element, and its child head and 5:06
    body elements, which are siblings within the root element or node. 5:11
    Before you can make a web page interactive With JavaScript, 5:17
    you'll need a way to access elements or nodes in the DOM. 5:21
    Next, you'll learn about the window and document objects. 5:24
    These special objects provide the entry point into the web page's content. 5:28

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up