-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathDomExercise.html
93 lines (78 loc) · 4.1 KB
/
DomExercise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!-- JS and the DOM -->
<!--
READ THIS FIRST!
This file is an HTML file. You'll put your JS code for the exercises in a <scipt> tag at the bottom of this file.
Open this file in Google Chrome by opening Chrome, typing command-O, and selecting this file.
Or in Chrome you can use the menu bar by doing File -> Open.
As you add JS code to the file, you can refresh the page and see your code take effect.
You can also type your JS code in the Console tab of Chrome Developer Tools to see it take effect.
Note: Usually you would put your HTML and JS in separate files, but for simplicity we're
putting them in the same file for this exercise.
Read through the HTML code given, then scroll down to the exercises below.
Type your JavaScript code for each exercise below each exercise description.
For this exercise, don't change the HTML code given.
-->
<html>
<body>
Animals:
<ol id="ol1">
<li>Frog</li>
<li>Dog</li>
<li>Bunny</li>
</ol>
<div id="id1">
<p>This is the text in div id1</p>
<p>Hope you enjoy my HTML</p>
</div>
<p id="id2">Here's some text in a paragraph</p>
<div class="myClass">I love learning about HTML and JavaScript</div>
<p class="myClass">Coding is fun</p>
<button id="button1">Button 1</button>
<br /><br />
<button id="button2">Button 2</button>
</body>
<script type="text/javascript">
// Exercise 1: Select the element with id "id2" and change the text inside it to "Here's some new text"
const id2 = document.getElementById('id2');
id2.textContent = "Here's some new text!";
// Exercise 2: Select the element with id "id1" and make the text inside it green.
const id1 = document.getElementById('id1');
id1.style.color = 'green';
// Exercise 3: Select the elements that have the class "myClass". console.log the output.
const myClass = document.getElementsByClassName("myClass");
console.log(myClass);
// Exercise 4: Select the children of the element with id "id1". console.log the output.
const parents = document.getElementById("id2");
const myKids = parents.children;
console.log(myKids);
// Exercise 5: Select all list items on the page. console.log the output.
const listItems = document.querySelectorAll('li');
console.log(listItems);
// Exercise 6: Use JavaScript to find the *number* of list items on the page. console.log the output.
const numOfListItems = document.getElementsByTagName('li').length;
console.log(numOfListItems);
// Exercise 7: Using JavaScript, create a list item and add it to the end of the ordered list.
const unorderedList = document.getElementById('ol1');
const newListItem = document.createElement('li');
newListItem.textContent = "Cat";
unorderedList.appendChild(newListItem);
// Exercise 8: Using JavaScript, make it so that when button1 is clicked,
// an alert pops up saying "Hi from Techtonica".
const button1 = document.getElementById('button1');
button1.addEventListener("click", function() {
alert("Hi from Techtonica");
});
// Exercise 9: In your own words, write a few sentences explaining what the DOM is. Write your answer in a comment below:
//
// The DOM stands for Document Object Model and it represents web pages as a tree of objects. It allows programs like JS to access and change how the page displays and makes pages more interactive and responsive.
// The next two exercises combine the DOM with other JavaScript you've learned. Try them for an extra challenge!
// Exercise 10: Select the elements with the class "myClass" and update the text inside each of them to end with "!"
// Hint: To operate on multiple elements, you can use a loop.
// Exercise 11: Make it so when the button2 is clicked,
// the children of the element with id "id1" each have their text replaced with a random number 1-100
// How was this exercise (easy, hard, fun, confusing)?
// What references did you use to help?
// Please put your answers in a comment below:
//
</script>
</html>