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

Accessing the DOM

6:03 with Guil Hernandez

The window object contains a property named document, which is an object, and it's the entry point into the DOM loaded in the current window. We use the document object to select and control elements of the web page. This document object and some of its common properties are what we'll focus on for the rest of this course.

Further Reading

Style property names with two or more words, like backgroundColor and borderColor are in camelCase. This is different from how you'd write them in CSS with dashes between each word.

JavaScript's core methods and properties all use camelCase, including all DOM properties, attributes, and event handlers. The inline CSS style declaration properties are no different, and it's important to remember when working with the style property.

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

    The window object also contains a really important property named document, which 0:00
    is an object and it's the entry point into the DOM loaded in the current window. 0:06
    We can use the document object to select and control elements of the web page. 0:11
    This document object and some of its common properties are what we'll focus 0:15
    on for the rest of this course. 0:19
    The document object is the root of every node in the DOM. 0:22
    For example, if I access the document property in the console 0:26
    with window.document, the console returns a reference to 0:31
    the current document contained in the window or current browser 0:36
    tab with elements such as html, head, body, a div, and so on. 0:41
    You just learned about how windows objects and methods are automatically 0:47
    attached to the window object, so typing only document returns the same. 0:52
    Remember, the elements in this current document are now 0:58
    treated as objects via the DOM. 1:03
    Those objects are called nodes. 1:06
    And you can call different methods on them and read or 1:09
    modify their specific properties. 1:12
    I can start doing things with JavaScript, like reading their contents. 1:14
    For example, document.title, returns the page's title text. 1:21
    I can change the title text by pressing the up arrow key on my keyboard 1:28
    to bring back the previous command, and 1:33
    assigning document.title a string with the new text to display. 1:36
    My web page. Notice the new title in the browser tab. 1:41
    To return only the body of the current document, type document.body. 1:47
    This returns an object representing the body tag of the current page, 1:54
    and all of its child elements or nodes. 2:00
    And check this out. 2:04
    Once you have a reference to the body, you can change some of its style properties, 2:06
    like the background color like this. 2:11
    document.body, dot style dot, 2:13
    background color equals tomato. 2:18
    You'd typically do most style changes with CSS. 2:28
    But this is an example of how you can access and 2:32
    change parts of the current page with JavaScript via the DOM. 2:35
    Here, we're setting the background color property of style, 2:39
    which is a property of the body object, and 2:45
    that itself is a property of the document object. 2:49
    We know that document is a property of the global window object, so 2:54
    we don't need to reference it here specifically, and 2:58
    this changes the background color of the page's body. 3:01
    Check the teacher's notes with this video to learn more about why 3:08
    the background color property is written this way in camel case, 3:12
    instead of how you'd write it in CSS. 3:15
    I'll talk more about this later, too. 3:18
    Earlier I mentioned that the changes you make with JavaScript do not 3:21
    appear in the html source code. 3:25
    In the Elements panel, notice how the body tag has a style 3:28
    property with the background color I just added. 3:33
    If I view the page's source and find a body tag, 3:38
    those changes do not appear here, and 3:42
    the title element is not updated with the text I added with JavaScript. 3:45
    This illustrates the difference between the actual source html and 3:51
    the DOM that we interact with using JavaScript. 3:56
    Similarly, you can access certain elements, like the body, 4:01
    and change its entire contents or even remove it from the DOM. 4:05
    For example, you've used the innerHTML property in previous 4:10
    JavaScript lessons to get or set the html inside an element. 4:14
    So I'll set document.body.innerHTML 4:18
    to an h1 with the text, hello world. 4:24
    Press Enter, and this replaces everything inside the body with the new heading. 4:33
    Refreshing the page source still displays all the original HTML code 4:39
    within the body. 4:44
    And refreshing the task list app brings back the original HTML 4:45
    elements defined in the HTML file. 4:50
    I can also remove the entire body from the DOM by calling the remove 4:54
    method on the body with document.body.remove(). 5:01
    The body is now removed from the document. 5:07
    I'll refresh the page source. 5:11
    And again, notice how all the original source code remains unchanged. 5:13
    The elements panel, however, shows the updated DOM without the body element. 5:18
    You'll usually make changes like this based on a user's 5:24
    interaction with the page. 5:27
    Clicking a button for example, might change the color and 5:29
    background color of the page or remove content from the page. 5:34
    And don't worry about what style.backgroundColor and 5:39
    dot remove mean for now. 5:42
    We'll go over this code more in depth soon. 5:44
    I've typed all my code into the console so far, but even when you write 5:47
    inline JavaScript inside script tags or load an external JavaScript file, 5:52
    you can immediately begin accessing and controlling HTML elements via the DOM. 5:57

    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