• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 8/5/19

Discover the DOM

Log in or subscribe for free to enjoy all this course has to offer!

Let's get you set up with what you need for this course and then discover how a web page is shown by a browser! You have two options for following along in this course. You can make modifications in files on your computer via the following file directory strategy:

  • One folder called htmlcontaining a file called course.html 

  • One folder called js  containing a file called course.js 

You'll add each code snippet to its relevant file and open the HTML file in your browser to see the effects.

Alternatively, you can use a website called CodePen that allows you to write HTML, CSS, and JavaScript, and see the effects instantly below the editor. Each code snippet in this course has an associated CodePen link.

To follow along on your computer, you'll need:

  • The latest version of Google Chrome

  • A text editor such as Sublime Text

Introduction to the DOM

You already know that a web page is a document that contains text and tags such as headings, paragraphs, links, etc. This happens in a language called HTML.

If you're following along on your computer, add the following content to your HTML file. Feel free to add your own information! 😊

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>My web page</title>
</head>

<body>
    <h1>My web page</h1>
    <p>Hello! My name's Emily.</p>
    <p>I live in <a href="https://en.wikipedia.org/wiki/New_York_City">New York City</a>.</p>
</body>

</html>

Open the file in your browser (usually, you can right-click inside the file in your text editor and click "Open in browser").

The browser takes the HTML code and builds a representation of its structure. It then displays this structure in the browser.

This structural representation of a web page (done by the browser) is targetable via JavaScript. It is called DOM, short for Document Object Model. The DOM defines the structure of a page and a way to interact with it. This means it's a programming interface, or API (Application Programming Interface)!

Web page structure

A web page is a set of nested tags. You can represent it in a hierarchical form called a tree. The  <html> element sets up your document as HTML and contains two sub-elements,  <head>  and<body>, which themselves contain several sub-elements.

Here's the tree corresponding to our example HTML page.

Each entity in the tree is called a node (node). There are two types of nodes:

  • Those that correspond to HTML elements like <body> or <p>. These nodes can have subnodes called children.

  • Those that match the textual content of the page. These nodes do not have children.

Get started with the DOM

The DOM is a hierarchy of objects, where each object is a node in the tree. DOM objects have properties and methods that you can manipulate with JavaScript.

Access the DOM with the document  variable

When a JavaScript program runs in the context of a web browser, it can access the root of the DOM using the variable document .

document is an object that has  head and body properties which allow access to the <head> and <body>  elements of the page.

In your text editor, add the following contents to your JavaScript file, and save the file:

var h = document.head; // "h" variable contains the contents of the DOM's head
console.log(h);

var b = document.body; // "b" variable contains the contents of the DOM's body
console.log(b);

Save your changes and refresh the corresponding HTML page in your browser. The console should show two tags!

Discover a node's type

Each object has property called nodeType which indicates its type. The value of this property is document.ELEMENT_NODE for an "element" node (otherwise known as an HTML tag) anddocument.TEXT_NODE for a text node.

Type the following code in the file  course.js :

if (document.body.nodeType === document.ELEMENT_NODE) {
    console.log("Body is an element node!");
} else {
    console.log("Body is a textual node!");
}

Refresh the display course.html in the browser. You get the following result.

As expected, the DOM object body is an element node (because it's an HTML element)! 

Access a node's children

Each element-type object in the DOM has a property called childNodes. This is an ordered collection containing all its child nodes as DOM objects. You can use this collection like a table to access the different children of a node.

The following code would display the first child of the body node. 

// Access the first child of the body node
console.log(document.body.childNodes[0]);

Wait...why isn't the first child node h1, since that's the first element in the body's HTML? 

Line returns in HTML code are considered text nodes by the browser. The node h1 is therefore the second child node of the body. Let's double check that:

// Access the second child of the body node
console.log(document.body.childNodes[1]);

After updating that code, you'd get the h1 as a result.

Browse child nodes

To browse a list of child nodes, you can use a  for  loop as seen below:

// Show the body node's children
for (var i = 0; i < document.body.childNodes.length; i++) {
    console.log(document.body.childNodes[i]);
}

Again, spaces and lines count as text nodes in the DOM.

Access a node's parent

Each object has a property called parentNode that returns its parent node as a DOM object.

var h1 = document.body.childNodes[1];
console.log(h1.parentNode); // Show the body node

console.log(document.parentNode); // Will show null, since body has no parent node

In summary

  • A web page is a structured document containing both text and HTML tags. With JavaScript, you can access the structure of a page displayed in a browser and modify it.

  • The DOM, or Document Object Model, is a standardized way to define a web page's structure and allow JavaScript to interact with it. Each object corresponds to a DOM node in the "tree" of the web page.

  • The  document variable provides access to the root of the DOM tree and corresponds to the  <html> element in the HTML itself.

  • DOM objects have properties and methods to be used with JavaScript. For example, nodeTypereturns the node type, childNodes contains a collection of child nodes, and parentNodereturns the parent node.

Example of certificate of achievement
Example of certificate of achievement