Exercise 10.4

This is Exercise 10.4, lecture on traversing DOM with Javascript, used in the course IDATA2301 Web technologies at NTNU, campus Aalesund.

Go back to exercise list.

Purpose

The purpose of the exercise is to learn how you can access specific elements in the DOM tree.

Instructions

Go to https://web-tek.ninja in your browser (preferably in another tab), open developer tool console and explore the DOM:

1. type document.body in the console, hit Enter. What do you see?
2. Select the heading "CSS exercises" and save the reference to it in a variable heading1. You can do that by issuing the following command in the console: let heading1 = document.getElementById('css-exercise-heading');
3. Now change the text of the heading to "Cool exercises".
4. Find the ID of the heading "CSS Grid exercises". Hint: you can right-click on it with the mouse, select Inspect. The Elements tab of dev tools will be opened, and the element selected. Do you see the id="..."?
5. Now change the text of this heading (from the previous step) to "Hei!".