• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/2/20

Understand the DOM

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

What is a web page?

We've all used web pages. You're viewing one now! But what is a web page, really? In order to modify one, we'll need to know what we're working with...

So let's see... A web page has a surface to it - the interface that we see as the user. But of course there's the sourcecode behind that surface, too. So which is the web page?

Well... both!

A web page is a document. It's a document that can be displayed either in a browser window or as the source code.

In order to modify this document, we use an object-oriented representation of it called the Document Object Model, or DOM.

What is the DOM?

The DOM is an interface for HTML documents. Basically, the DOM is a representation of a document which we can use to manipulate the document's structure, styles, and content using JavaScript.

The DOM has a tree-like structure: starting with the root element (the  <html>  tag), each child element branches out.  Typically, the root element is a parent to two child elements:  <head>  and  <body> .  The  <body>  tag is then parent to any elements within it — paragraphs, links, buttons, forms etc.  Those child elements can then have children of their own: a form will have labels and inputs, an article can have a heading, text content, links, etc.

The DOM as a tree
The DOM is like a tree

Why does this matter?

We use this structure to traverse the DOM; we use it to add, modify, and remove elements from the page after it has finished loading. For example, this allows us to:

  • react to user input — we can modify a page's content according to information entered by a user, and even send that information to a server for further manipulation.

  • use data received from servers — we can reach out to powerful APIs (Application Programming Interfaces) and use the information received to revise a page's contents.

Throughout this part of the course, you will learn how to:

  • gain access to specific elements in the DOM;

  • modify the contents and styles of those elements, and even remove them if necessary;

  • create new elements and add them to the DOM;

  • react to DOM events — user clicks, form navigation, and more.

OK, let's get to it!

Example of certificate of achievement
Example of certificate of achievement