The Document Object Exercise
Due Tuesday 6 May 2025
Due Tuesday 6 May 2025
Home > Chapter Review and Exercises > Chapter 22 - Using JavaScript > The Document Object Exercise
For this exercise, you will follow the instructions in The Document Object Model video shown in class (and available below). The written instructions are at the end of the video at the 11 minute 48 second mark and are also below in written form.
The three files (index.html, index.js, and styles.css) are already in your Google Drive folder, in the section labeled The Document Object Model Exercise.
You can also download them from the link below.
Your task will be to use a JavaScript command to first select the third <li> element, <li class="List">Third</li>.
You will then change the word "Third" to your name.
To do this, do not edit the index.html file. Rather, open it in Chrome.
Open the Chrome Console (CTRL+SHIFT+I or press the F12 key).
IMPORTANT: Before you type anything in the Chrome console you need to type allow pasting and hit enter. This is one time thing and will enable the pasting functionality.
Add a JavaScript command into the Chrome Console to make the change to index.html in steps 3 & 4 above.
Once your JavaScript code successfully makes the change, you will select all of you JavaScript code from the Chrome console into the Clipboard by following these steps:
While still in the Chrome Console with your JavaScript code, press CTRL + A (this will select all of your JavaScript code)
Then press CTRL + C (this will copy all of your JavaScript code to the Clipboard)
Open up the Solution.txt file that's in your Google Drive folder, in the section labeled The Document Object Model Exercise.
Paste your JavaScript in that document by pressing CTRL + V
Press CTRL + S to save it and you are done.
Don't worry if you can't make it work right. Copy what you have and save it to the Solution.txt file. Showing effort is very worthwhile.
HINT: Open the document The DOM Exercise.pdf to see all the JavaScript methods and properties mentioned in the video.
For this exercise, ONLY use the five JavaScript objects, methods, and functions that were described in the video. They are:
document, firstElementChild, lastElementChild, querySelector("ul"), innerHTML = "new text";
Make sure your JavaScript methods and properties are separated by periods, and include a semi-colon at the end.
The answer should only be one line of JavaScript.
There is more than one correct answer to this problem.
The following JavaScript command will select the <link> element in the index.html document below:
document.firstElementChild.firstElementChild.lastElementChild;
Step by step, the JavaScript does this:
document selects the entire index.html file.
firstElementChild then selects the <html> element.
The next firstElementChild selects the <head> element.
Then lastElementChild selects the <link> element since it is the last element in the <head> element.
The following JavaScript would also select the <link> element in the index.html document below:
document.firstElementChild.firstElementChild.querySelector("link");
Step by step, the JavaScript does this:
document selects the entire index.html file.
firstElementChild then selects the <html> element.
The next firstElementChild selects the <head> element.
Then querySelector("link") selects the <link> element since it is the only <link> element in the <head> element.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<input type="checkbox">
<button style=":active color:red;">Click Me</button>
<ul>
<li class="list">
<a href="https://www.google.com">Google</a>
</li>
<li class="list">Second</li>
<li class="list">Third</li>
</ul>
</body>
</html>