30 Days Of JavaScript

Day 16: DOM Manipulation

Lesson 0: Intro

Today is a big day for you and this course, we finally look at how we can use JavaScript to change how things look and behave in the browser!

What we cover today is just the surface of what JavaScript can do for user interactions and creating amazing and immersive experiences for the web. As with many things, the little that we cover today is the 20% that gives you 80% of the power you need to make interactive website and web apps.

Today we will look at:

Getting elements
Deleting elements
Creating elements
Changing elements
Styling elements

Since this is a JavaScript course we are going to be using the built in methods provided to do all of these things. You may have heard of things like React, Angular, Vue and and Svelte that are used for doing a lot of this stuff. We won't be covering those here but all of them are based around the primary concept that we will talk about today, which is, using JavaScript to change what is on the screen.

Before we carry on, after the last lesson you need to reset your index.html file to look like this:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8
9    <style>
10      #red-text {
11        color: red;
12      }
13
14      #blue-text {
15        color: blue;
16      }
17
18      .title-large {
19        font-size: 48px;
20        font-weight: bold;
21      }
22
23      .title-small {
24        font-size: 24px;
25        font-weight: bold;
26      }
27
28      .hidden {
29        display: none;
30      }
31
32      .warning {
33        color: orangered;
34      }
35    </style>
36  </head>
37  <body>
38    <p id="red-text">Hello World</p>
39  </body>
40  <script>
41    console.log("Hello World from JS");
42  </script>
43</html>

This is the last time I will show you the full page. From now on I will show you the changes you need to make to either the area in between the <body> ... </body> tags, the area in between the <script> ... </script> tags or between the <style> ... </style> tags.

Never delete these tags!

HTML and CSS Prerequisite

Although this course doesn't have any prerequisites, I am assuming you know the basics of HTML and CSS for this today's lessons. If you don't here's a very high level overview.

HTML

HTML is a markup language used to preset information in a web browser. The basic structure of a web page is:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8  </head>
9  <body>
10    <p>Hello World</p>
11  </body>
12</html>

HTML is all about wrapping content between tags. Find the <body> tag in the example above. A tag like this <> is the opening tag, hence <body> represents the start of the body of the page. A closing tag has this format </> so </body> marks the end of the body. The body is the content you see in the browser.

If I told you that the tag for a paragraph is p then you should be able to see what's going on with the Hello World in the example above. It's a paragraph inside the body.

The DOM

The tags and the structure that they provide tells your web browser how to render the page. This is loaded into the Document Object Model (DOM), which is a fancy way or saying that the browser takes the HTML and converts it in to a model of the page that it is able to render.

The DOM is what JavaScript is able to interact with and change with the methods that we will be exploring today.

It can get a little confusing though so take you time. The main source of confusion for new developers, is that the HTML that you write and gets displayed never changes no matter what you do with you JavaScript. Because the JavaScript doesn't change the HTML (that you see) it changes the DOM (the thing your browser creates).

So you can start with HTML that creates and shows one thing, but once you run your JavaScript it can (and will be) totally different - when you refresh the page though it will go back to the HTML.

CSS

Now to add some CSS.

1<p id="my-title">Hello World</p>

We've updated the paragraph tag with an id attribute. This means we can use CSS to style what this text looks like.

The CSS to make this red and really big is:

1#title {
2  color: red;
3  font-size: 50px;
4}

id's have to be unique, so if we have lots of p's that we wanted to make red and big we would use a class instead.

1<p class="my-title">Hello World</p>
2<p class="my-title">Hello World</p>
3<p class="my-title">Hello World</p>

And the CSS:

1.title {
2  color: red;
3  font-size: 50px;
4}

Notice how in the HTML we change the tag attribute name from id to class and in the CSS we change #id to .id.

Why we care

The id and class attributes are also important for our JavaScript, as they are things that we can use to search for and find elements in the DOM.

Right, let's hop to it.