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.
Another hint
To change the text inside an item you will need to use the Javascript method innerHTML. For example, once you have arrived at the <ul>, you will go to the last <li> using the lastElementChild method. Then you would use the innerHTML method to change" Third" to "Angela":
.lastElementChild.innerHTML = "Angela";
<!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>
To allow pasting in Google Chrome, especially when blocked by sites, type allow pasting into the developer console (F12) or install a browser extension like "Enable Copy Paste - E.C.P". To grant persistent clipboard permission, go to Settings > Privacy and security > Site settings > Clipboard and select "Sites can ask to see text and images".
Methods to Enable Pasting
Via Developer Console (Fixes paste protection):
Press F12 to open the developer tools.
Type allow pasting (without quotes) in the console and press Enter.
Via Chrome Extension:
Install an extension like Enable Copy Paste - E.C.P or Allow Copy/Paste from the Chrome Web Store.
Click the extension icon and activate it on the site.
Via Site Settings (Permissions):
Open Chrome Settings.
Navigate to Privacy and security > Site settings > Additional permissions > Clipboard.
Select "Sites can ask to see text and images on your clipboard".
Alternative for Console: If allow pasting does not work, some users suggest typing allow space pasting as a bypass.