In this tutorial, I am going to introduce you to a fundamental concept in front end web development called the Document Object Model, or the DOM for short.
Table of Contents
You can skip to a specific section of this tutorial using the table of contents below:
- What is the DOM?
- Important Web Development Terminology
- The HTML Document That We Will Be Using In This Course
- Final Thoughts
What is the DOM?
So what is the DOM and how does it play into this? Well, the DOM is what you see in the
elements panel of your browser’s developer tools. The DOM looks like this:
- Starting a YouTube video when you click the “Play” button
- Adding the thumbs-up emoji when you like a photo on Facebook
- Creating new HTML elements or removing existing ones
- Adding or removing CSS classes to existing HTML elements
- Playing music or video in the webpage
Important Web Development Terminology
windowis an object where all of your global variables are stored as attributes. This means that if you have a global variable, you can either access it using its variable name (like we have so far in this course) or with the dot operator. In general, everything you know about your window (including its height, width, etc.) is available from the
windowobject. Here’s an example using the global variable
console.log(location); console.log(window.location); //These will each log the same attribute to the console
document: this refers to all of the HTML that is contained between your opening
<html>tag and your closing
<html>tag. Everything within the
documentis accessible using the
documentkeyword combined with a dot operator.
navigator: this keyword provides information about the actual device that the browser is running on. Think of attributes like battery life, webcam information, audio access, and other device-specific attributes.
The HTML Document That We Will Be Using In This Course
I have provided some basic HTML and CSS files in this repository for you to work with. The easiest way to proceed is to fork this to your own GitHub account and download the files from there.
Here’s a summary of the repository in its current state:
style.cssdocument contains some basic CSS styling. One of the main uses of this
index.htmlfile is already linked to the
style.cssfile using a
<style>tag by default.
Here are some high-level guidelines on how you should work through these lessons:
- Download a new copy of the
script.jsfiles to your computer
- Open the
index.htmlfile in a browser window. This will allow you to actually see the webpage rendered in its final form, and not the underlying code.
- Open the
script.jsfile in your code editor. Every time you make changes to this file, you can save it and refresh the
Here is a brief summary of the content we covered in this lesson:
- What is the DOM
- How to connect CSS and JS files to an HTML document using