Exercise 10.6

This is Exercise 10.6, 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 select more than one element

Instructions

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

1. Select all h2 elements on the site: type document.querySelectorAll('h2') in the console, press Enter. Explore the NodeList you get in return. Open it. What happens when you move the mouse over the first element in the array?
2. Select all elements with class css-exercise. You should get all 7 <li> elements containing links to CSS exercises. But you probably got only 6 items, right. Can you find what is missing? P.S. Debugging and finding mistakes in HTML, CSS and Javascript is an essential skill!
3. Select the first <article> element on the page, store it in a variable.
4. Now use that variable to find all <h3> elements inside that article. How many did you get? What do they refer to?