-
Notifications
You must be signed in to change notification settings - Fork 0
/
dom-query-js.html
104 lines (81 loc) · 3.63 KB
/
dom-query-js.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
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM: Query and Modify</title>
</head>
<body>
<h1 id="main-header">Hello World!</h1>
<ul>
<li data-dbid="1">Item 1</li>
<li data-dbid="2">Item 2</li>
<li data-dbid="3">Item 3</li>
<li data-dbid="4">Item 4</li>
<li data-dbid="5">Item 5</li>
</ul>
<h2 id="sub-header">Hello Again.</h2>
<p class="sub-paragraph">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<button id="btn1"> JavaScript is cool!</button>
<button id="btn2"> Change subHeader to blue</button>
<button id="btn3"> Grey out every other list item</button>
<button id="btn4"> Mission Accomplished!</button>
<script>
"use strict";
// TODO: Uncomment next line and get the main header element by id
const mainHeader = document.getElementById('main-header');
console.log(mainHeader);
// TODO: Set inner html of mainHeader to "JavaScript is Cool"
mainHeader.innerHTML= "JavaScript is Cool";
// TODO: Uncomment the next line and get the sub header element by id
const subHeader = document.querySelector('#sub-header');
console.log(subHeader);
// TODO: Set the text color of subHeader to blue
subHeader.style.color = "blue";
// TODO: Uncomment the next line and get all list items
const listItems = document.querySelectorAll("li");
console.log(listItems);
// TODO: Set text color on every other list item to grey
for (let i = 0; i < listItems.length; i+=2) {
listItems[i].style.color = "grey";
}
// TODO: Set text color of li with dbid = 1 to blue
// [...document.getElementsByTagName("li")].forEach(listItem => console.log(listItem.style.color = "blue"));
for (let i = 0; i < listItems.length; i++) {
listItems[0].style.color = "blue";
}
// TODO: Uncomment the next line and get all elements with class name sub-paragraph
const subParagraphs = document.querySelector('.sub-paragraph');
console.log(subParagraphs);
// TODO: Change the text in the first sub paragraph to "Mission Accomplished!"
subParagraphs.innerText = "Mission Accomplished";
console.log(subParagraphs.innerText);
document.querySelector('#btn4').addEventListener()
// Document Object Model (DOM) Events
// Add 4 buttons to the page. Attach click event listeners to each of the buttons and have the handlers perform the modifications that were automatically taking place.
const button1 = document.querySelector('#btn1');
btn1.addEventListener("click", function () {
console.log(event.target.innerHTML);
});
const button2 = document.querySelector('#btn2');
btn2.addEventListener("click", function () {
console.log(event.target.style.color);
})
const button3 = document.querySelector('#btn3');
btn3.addEventListener("click", function () {
console.log(event.target.style.color);
})
const button4 = document.querySelector('#btn4');
btn4.addEventListener("click", function () {
console.log(event.target.innerText);
})
</script>
</body>
</html>