bjf-flatiron / fewpjs-introduction-to-the-dom-to-get-started

Introduction to the DOM

Learning Goals

1. Identify the Document Object Model (DOM)
2. Explain how the DOM is created
3. Identify the DOM as accessed by JavaScript objects

Introduction

Previously we've learned that JavaScript was born in the browser along with the Document Object Model (DOM). We've acquired some JavaScript sight words, let's balance things out by learning about the DOM.

Identify the Document Object Model

Let's start with a biology metaphor. Your DNA represents a code-based version of you. The DOM represents a code-based version of a web page. If something edits your DNA, mutant powers changes will be made in your body. Similarly, if something changes the DOM, what's displayed in the browser changes as well.

Explain How the DOM Is Created

The DOM is created when the page loads from the HTML that the web server provides the browser. Let's examine this process step-by-step:

NOTE: We use Google Chrome.

1. In a Google Chrome browser, copy the current URL and open it in another tab.
2. To see the HTML of this page, add view-source: to the front of the URL in the new tab. By using the view-source URL prefix, all the page's source HTML appears. It will look something like this:
3. The browser reads this HTML, along with CSS and JavaScript defined in <script> or <link> tags, to create the DOM inside the browser. At this point, nothing is displayed on the screen. This time when nothing is displayed is very brief so our human eyes never really catch it.
4. The browser then uses the DOM object to create the rendered page. While we often learn that browsers "display HTML" that's not exactly accurate. Browsers use the HTML to create a "middleman" that they, in turn use to display the structured and styled content.

Identify the DOM as Accessed by JavaScript Objects

Recall that JavaScript is object-oriented. The DOM is available inside Chrome through two variables: window and document.

The window variable points to an object that represents Chrome's information about the browser, well, "window." It has many functions, but the main one is "it's a place where everything is." Not to be Zen here, but a browser without a window is like the universe before the Big Bang; there's just... nothing. The window is the place where the Things are defined (Array, String, and Number).

In the window, JavaScript also tracks operating system browser information like:

window.innerHeight;
// returns the inner height of the browser window.

Like all objects, window also has methods. We won't use them too much. We don't want to mess with the container of everything that is or operating system stuff.

We want, rather, to change content. We're going to focus on an object called document.

As an object, document has properties:

document.URL //=> http://www.flatironschool.com

As an object document also has methods:

document.write("Moof") //=> Removes all existing DOM content, replaces it with "Moof"

The methods and properties that the DOM provides via its objects is called the DOM's "Application Programming Interface," or "API." It's just a programming word that you're likely to see online. But it just means "the things that these objects know how to do."

Conclusion

In this lesson we met our partner, the DOM, that is a representation of the HTML, CSS and JavaScript loaded by the browser when we visit a page. We normally interact with it through the document object. Because it is the "source of truth" for what browsers display, changes to the DOM create changes in the browser screen.

Resources

• CSS Tricks - What is the DOM?
• MDN - The DOM