Skip to content

Commit b63aeb3

Browse files
elfgoddelfgodd
committed
Section 13: getElementsByClassName
1 parent fba26c9 commit b63aeb3

4 files changed

Lines changed: 103 additions & 2 deletions

File tree

‎13-JS-In-the-Browser-DOM-Manipulation/06/app.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
h1 {
2+
color: purple;
3+
font-size: 60px;
4+
}
5+
6+
#bear-photo {
7+
width: 250px;
8+
height: 250px;
9+
}
10+
11+
.special {
12+
color: teal;
13+
font-size: 30px;
14+
border: 1px solid teal;
15+
}
16+
17+
input[type="password"] {
18+
height: 50px;
19+
width: 100px;
20+
}

‎13-JS-In-the-Browser-DOM-Manipulation/06/app.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// ******************************
2+
// getElementsByClassNames ******************************
3+
// Example 1
4+
console.log('\n')
5+
6+
const header = document.getElementsByClassName('header')
7+
console.log(header)
8+
console.dir(header);
9+
10+
// Example 2
11+
console.log('\n')
12+
const special = document.getElementsByClassName('special')
13+
console.log(special)
14+
console.dir(special)
15+
special[0].innerText = 'Lazy Bear'
16+
17+
console.log('\n')
18+
for(let element of special) {
19+
console.log('element: ', element)
20+
console.log('element.innerText: ', element.innerText)
21+
}
22+
23+
// Example 3
24+
console.log('\n')
25+
// Getting just specific elements
26+
const getUL = document.getElementsByTagName('ul')[0]
27+
console.log('getUL: ', getUL)
28+
29+
console.log('\n')
30+
const ulWithSpecial = getUL.getElementsByClassName('special')
31+
console.log('ulWithSpecial: ', ulWithSpecial)
32+
33+
console.log('\n')
34+
console.log(getUL.getElementsByTagName('li'))

‎13-JS-In-the-Browser-DOM-Manipulation/06/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="app.css">
8+
<title>JavaScript</title>
9+
</head>
10+
<body>
11+
<h1 class="header">My WebPage</h1>
12+
<p>Lorem ipsum dolor sit amet consectetur adipiscing
13+
ipsum dolor sit amet consectetur adipiscing
14+
ipsum dolor sit amet consectetur adipiscing
15+
</p>
16+
<p id="main">Lorem ipsum dolor sit amet consectetur adipiscing
17+
ipsum dolor sit amet consectetur adipiscing
18+
ipsum dolor sit amet consectetur adipiscing
19+
</p>
20+
<form action="">
21+
<input type="text" placeholder="Bear Name" value="Teddy Bear">
22+
<input type="password" placeholder="Password" value="teddy123">
23+
<input type="submit">
24+
</form>
25+
<p class="special">
26+
27+
</p>
28+
<ul>
29+
<li class="special">First Thing</li>
30+
<li>Second Thing</li>
31+
<li class="special">Third Thing</li>
32+
</ul>
33+
<img
34+
id="bear-photo"
35+
src="https://images.unsplash.com/photo-1547146092-983100a60066?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
36+
alt="alt tag"
37+
/>
38+
<script src="app.js"></script>
39+
</body>
40+
</html>

‎13-JS-In-the-Browser-DOM-Manipulation/README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ Typically, we select an element or multiple elements and then do something with
8585
- Select a form and add two new buttons to it
8686
- Select a button and add events to it
8787

88-
So when we want to add some events and interactivity, we still start by selecting and there's a bunch of different ways to select using the document
88+
So when we want to add some events and interactivity, we still start by selecting and there's a bunch of different ways to select using the document.
8989

9090
### SELECTING
9191

@@ -113,4 +113,11 @@ getElementsByTagName we will get more than one element or potentially we could a
113113
The elements returned by getElementsByTagName looks like an array it is not an array.
114114

115115
### What is HTMLCollection?
116-
It is an array like object that is not an array, it's a type in the DOM and a type of collection, but we can do some array things
116+
117+
It is an array like object that is not an array, it's a type in the DOM and a type of collection, but we can do some array things.
118+
119+
## 8. getElementsByClassName
120+
121+
If we want to select based on CSS classes, we have a special method to do just that **getElementsByClassName**, **Elements** it's plural, this tells us that we'll get a collection back, we'll get multiple elements or we could get one element, but it will be in a collection just like **getElementsByTagName**.
122+
123+
If i try and select based on of an ID, it's not going to work.

0 commit comments

Comments
 (0)