Javascript - DOM 1
Learning Objectives
By the end of this lesson trainees should be able to:
Define what the DOM is and what it does
Use query selectors to retrieve elements from the DOM
Use event listeners to respond to events that happen on the DOM
Create DOM elements using JavaScript and add them to the DOM
Manipulate DOM elements using JavaScript to change their properties
Teacher instruction
Husk at sende nogle visualiseringer hvis i finder nogle nice nogle!
Teach the learning objectives. Fx
insertAdjacentHTML
,textContent
, etcAdd eventlistener
DOM
Break down the exercises. Focus on which part of the html you are working on! (Selection, inserting, manipulation, event)
Flipped classroom videos
JS in the Browser
Up until now we've been using console.log
(and a bit of document.write
) to see the results of our code running, because it allows us to focus on writing code and seeing the results instantly. But JavaScript was not meant to be run in console.log
: it was meant to make web pages dynamic.
Lots of websites are powered by JavaScript today, and some (like Facebook) cannot function at all without it: it's become that important to the look and feel of the website.
The DOM
Your webpages are made up of a bunch of HTML elements, nested within each other (parents and children). But JavaScript doesn't know about any of that.
Thankfully, in JavaScript we have access to this "DOM" object (Document Object Model) which is actually a representation of our webpage that JavaScript can work with.
Here are two examples, HTML and then the DOM
<html>
<body>
<h1>Welcome!</h1>
<p>Hello world!</p>
</body>
</html>
This is how we would represent the document hierarchy above as a tree of nodes:

Interacting with the DOM using javascript
There are 4 important things to learn when interacting with the DOM
Accessing DOM elements (how to select a specific tag)
Manipulating DOM elements (how to change the tag we selected)
Creating DOM elements (creating new tags we can insert into the page)
Attaching events (how we can run code when fx a button is clicked)
Access DOM elements
The DOM offers a lot of useful functions we can use to find elements on the page. Here are some we'll be using today:
// will select the first tag with the classname of main-header
document.querySelector(".main-header");
// will select all the p tags in the page
document.querySelectorAll("p");
Both .querySelector
and querySelectorAll
accept a CSS selector as an input.
querySelector
selects only the first element it findsquerySelectorAll
selects all elements and returns aNodeList
.NodeList
can be turned into an array like this:Array.from(document.querySelectorAll("p"));
Getting value from element
When you have selected an html element you can then get data from it. Fx the text inside an html element, or the class it currently has
const textInsideH1 = document.querySelector('h1').textContent;
Here we get the text inside the h1
const h1Class = document.querySelector('h1').getAttribute('class');
Here we get the classname of the h1
Manipulate DOM elements
When a element has been selected it can be changed. Everything about the element can be changed
The text inside of the tag
The classnames
Id's
Style
Let's try and change the text inside a p
tag using innerText
👇
// find the first p tag
const pTag = document.querySelector("p");
pTag.textContent = "How are you?"; // now we can see the text displaying in the browser
We can also change the class name of the p
tag using.className
// find the first p tag
const pTag = document.querySelector("p");
pTag.setAttribute('class', 'red large');
Now the p
tag only has two class names red
and large
Inserting DOM elements
We will be inserting DOM elements using the function insertAdjacentHTML
. insertAdjacentHTML
takes two arguments:
A string representing the position relative to the selected element
An html string
document.querySelector('h1').insertAdjacentHTML('afterend', `<h2>New products</h2>`)
In this example i select an h1
tag and then insert the h2
after the h1
has ended
You can also insert the html before the element ends with beforeend
. There are more positions, documentation can be found here
Attach events to DOM elements
Once you retrieve an element using .querySelector
, you can attach an event to it. An event is any action that can be performed on that element. For now, we will just use the click event:
const button = document.querySelector("button");
// when the button is clicked "Something" is logged to the console
button.addEventListener("click", function() {
console.log("Something");
});
You will notice in the example that we passed a second argument to addEventListener
. That second argument is the function that we want to invoke when that event has happened.
Concrete examples of using the DOM in javascript
Creating a list of hobbies
Let's create a list of hobbies from javascript into the webpage using the DOM
html
<ul></ul>
javascript
// We will assume that the
const hobbies = ['Biking', 'music', 'food'];
// Select the ul tag
const ulElement = document.querySelector('ul');
// Let's iterate through the array of hobbies
hobbies.forEach(function(hobby) {
// For each hobby we create a new li tag
const liElement = document.createElement('li');
// Now we manipulate the li and change the text to be the hobby
liElement.innerText = hobby;
// Now lets add the liElement into the DOM
ulElement.appendChild(liElement);
});
Creating a select list
Let's instead of adding the hobbies as a list then add them as a select
tag so we can select one of the hobbies
html
<select></select>
javascript
// We will assume that the
const hobbies = ['Biking', 'music', 'food'];
// Select the ul tag
const selectElement = document.querySelector('select');
// Let's iterate through the array of hobbies
hobbies.forEach(function(hobby) {
// For each hobby we create a new li tag
const optionElement = document.createElement('option');
// Now we manipulate the li and change the text to be the hobby
optionElement.innerText = hobby;
// We can set the value of the option. That is normally lower case
optionElement.value = hobby.toLowerCase();
// Now lets add the liElement into the DOM
selectElement.appendChild(optionElement);
});
Getting the selected hobby is a bit tricky. Read here to get it working
Exercises
Preparation for exercises
Let's work on the code provided here
That means you have to clone this repo onto your computer and then find the A-dom-manipulation folder to open in VS code
Open a new project in webstorm from the folder
week-5/inClass/A-dom-manipulation
📝 Exercise 1 - level 1
Write JavaScript below that logs:
All the
p
tagsThe first
div
tagThe element with id
jumbotron-text
All the
p
tags contained inside the.primary-content
tag
📝 Exercise 2 - level 1
When a user clicks the ALERT
button, an alert box should pop up with the text "Thanks for visiting Bikes for Refugees!"
📝 Exercise 3 - level 1
Write JavaScript below that changes the background colour of the page when the "Change colour" button is clicked.
📝 Exercise 4 - level 1
When a user clicks the "Add some text" button, a new paragraph should be added below the buttons that says "Read more below."
📝 Exercise 5 - level 2
When the "Larger links!" button is clicked, the text of all links on the page should increase.
📝 Exericse 6 - level 2
When clicking the blue add button, take the text written in the input element, and add that text to the DOM. The text should be added using ul
and li
📝 Exercise 7 - level 3
Clicking Donate Now
should show a modal where a user can input some amount they want to donate to the cause. When they written the amount they should be able to click a button that will do the donation. When the donation has been completed. Show a success message and then close the modal.
📝 Exercise 8 - level 3
Your feature here. Come up with some feature you would like to create!
When you are done you can work on your handin for tuesday
Taken from https://syllabus.codeyourfuture.io/js-core-2/week-2/lesson
Last updated