-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (101 loc) · 4.04 KB
/
index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tour of DOM</title>
<link rel="stylesheet" href="styles/style.css">
<style>
.fruits-container li {
color: blue;
}
#fruits-title{
color:black;
}
.important-places{
color:blueviolet;
}
</style>
</head>
<body>
<header>
<h1>Welcome to my DOM</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, natus! Dolorem voluptate provident rem eligendi eaque, odit fugiat sed tenetur corporis vel, laudantium veniam accusantium sunt adipisci blanditiis dolore vitae?</p>
</header>
<main id="main-container">
<section>
<h1>My Awesome DOM de baba</h1>
<ul>
<li>Jalali Set</li>
<li>Shafayet</li>
<li>bonobash</li>
<li>DOM de re baba</li>
</ul>
</section>
<section class="fruits-container">
<h1 id="fruits-title" class="some-class blue-bg">Fruits I like</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Carrot</li>
</ul>
</section>
<section id="places-container" class="large-text">
<h1 id="places-title">Places I like to visit</h1>
<ul id="places-list">
<li class="important-places">Soondarban</li>
<li class="important-places">bandorban</li>
<li class="important-places">Kataban</li>
<li class="other-place">shalbon</li>
</ul>
</section>
</main>
<!-- ----------------------------external js------------------------------- -->
<!-- ----------------------------external js------------------------------- -->
<!-- ----------------------------external js------------------------------- -->
<script src="js/1dom.js"></script>
<script src="js/3append.js"></script>
<script src="js/2styleInJs.js"></script>
<!-- ----------------------------internal js------------------------------- -->
<script>
const title = document.getElementById('fruits-title');
title.setAttribute('title','tooltip set by js...');
// console.log(title);
const liCollection = document.getElementsByTagName('li');
// console.log(liCollection);
for (const li of liCollection) {
// console.log(li.innerText);
}
/* -------------------------option-1------------------------- */
// option-1: getElementsByTagName
const allHeadings = document.getElementsByTagName('h1');
for (const h1 of allHeadings) {
// console.log(h1.innerText);
}
/* -------------------------option-2 !!!------------------------- */
// option-2: getElementById
const fruitsTitle = document.getElementById('fruits-title');
fruitsTitle.innerText = 'Fruits changed by JS';
/* -------------------------option-3 !!!------------------------- */
// option-3: getElementsByClassName
const places = document.getElementsByClassName('important-places');
for(const place of places){
// console.log(place.innerText)
}
/* -------------------------option-4------------------------- */
// option-4: querySelector
// will return the first one, gives first matching -----> !!!
const fruits = document.querySelector('.fruits-container li');
// console.log(fruits.innerText);
/* -------------------------option-5------------------------- */
// option-5: querySelectorAll
// gives node list ----------------------------> !!!
const someLi = document.querySelectorAll('.fruits-container li');
// console.log(someLi);
for(const li of someLi){
// console.log(li.innerText);
}
</script>
</body>
</html>