Working with the DOM: Exercises

Display this web page in Brave or other, lesser web browsers.

Also open the page in a code editor. VS Code, VS Code Online or Sublime Text are all are good choices.

Follow the exercises in the online Lesson: Working with the DOM

✅  Happy coding.

Sample heading

Small heading 1

Paragraph 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed aliquid, distinctio ipsa pariatur exercitationem voluptate illo accusamus in sint voluptas quia alias odit! Nesciunt expedita libero accusantium sed quibusdam magni!

Small heading 2

Paragraph 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed aliquid, distinctio ipsa pariatur exercitationem voluptate illo accusamus in sint voluptas quia alias odit! Nesciunt expedita libero accusantium sed quibusdam magni!

Small heading 3

Paragraph 3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed aliquid, distinctio ipsa pariatur exercitationem voluptate illo accusamus in sint voluptas quia alias odit! Nesciunt expedita libero accusantium sed quibusdam magni!

Exercise 4.1: Element selector with document.getElementById() syntax

Write JS code that captures the string values in two DIVs and outputs the result to the web page and JavaScript Console.

First Name:
Laure
Last Name:
Berthaud
Full Name:

Exercise 4.2: Element selector with document.querySelector() syntax

Write JS code that captures the string values in two form input fields and outputs the result to the web page and JavaScript Console.

Exercise 4.3: Element selector with document.getElementsByTagName(index) syntax

Within the page-content DIV of the exercises web page, select the third h3 heading and output the result to the JavaScript Console.

Exercise 4.4: Element selector with document.querySelector(.class:nth-of-type(index) syntax

Within the page-content DIV of the exercises web page, select the second p paragraph of tect and output the result to the JavaScript Console.