Skip to content

Commit fba26c9

Browse files
elfgoddelfgodd
committed
Section 13: getElementsByTagName
1 parent d669f87 commit fba26c9

5 files changed

Lines changed: 114 additions & 3 deletions

File tree

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// ******************************
2-
// getElementById ******************************
2+
// getElementsByTagName ******************************
33
// Example 1
4-
/// Selecting the bear photo
4+
// Selecting the bear photo
55

66
const bearImg = document.getElementById('bear-photo')
77
// This looks like HTML but it's not
@@ -24,4 +24,4 @@ console.log('\n')
2424
const pMain = document.getElementById('main')
2525
console.log('pMain: ', pMain)
2626
console.dir(pMain)
27-
console.log(pMain.textContent)
27+
console.log(pMain.textContent)

‎13-JS-In-the-Browser-DOM-Manipulation/05/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/05/app.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// ******************************
2+
// getElementsByTagName ******************************
3+
// Example 1
4+
5+
const allPs = document.getElementsByTagName('p')
6+
console.log('allPs: ', allPs);
7+
8+
console.log('\n')
9+
const allH3 = document.getElementsByTagName('h3')
10+
console.log('allH3: ', allH3) // We get empty collection back
11+
12+
console.log('\n')
13+
const allH1 = document.getElementsByTagName('h1')
14+
console.log('allH1: ', allH1) // Just 1 element but i still get a collection
15+
16+
console.log('\n')
17+
const allInputs = document.getElementsByTagName('input')
18+
console.log('allInputs: ', allInputs)
19+
console.log('input[0]: ', allInputs[0]);
20+
console.log('input[1]: ', allInputs[1]);
21+
console.log('inpu[2]: ', allInputs[2])
22+
23+
console.log('\n')
24+
console.log('input[3]: ', allInputs[3]) // undefined
25+
26+
console.log('\n')
27+
console.log('input.length: ', allInputs.length)
28+
29+
console.log('\n')
30+
// console.log('input.pop(): ', allInputs.pop()) // TypeError: allInputs.pop is not a function
31+
32+
// type (input.) in the browser console to see all the available methods for the HTML Collection
33+
34+
for(let input of allInputs) {
35+
console.log('input: ', input)
36+
console.log('input.value: ', input.value)
37+
}
38+
39+
console.log('\n')
40+
// Turn the HTML Collection into an array
41+
// const arrayInputs = [...allInputs]
42+
// console.log('arrayInputs: ', arrayInputs)
43+

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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>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+
<ul>
26+
<li class="special">First Thing</li>
27+
<li>Second Thing</li>
28+
<li class="special">Third Thing</li>
29+
</ul>
30+
<img
31+
id="bear-photo"
32+
src="https://images.unsplash.com/photo-1547146092-983100a60066?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
33+
alt="alt tag"
34+
/>
35+
<script src="app.js"></script>
36+
</body>
37+
</html>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,14 @@ there is a match for that ID, we get that element back as an object the DOM repr
103103
If we pass in an invalid ID or something that's not on the page, we get nothing, so no error, we just get null because there isn't an element with that ID.
104104

105105
There are different categories of elements on the page and some of them have their own type, like in HTML paragraph element and HTML image element, these are different patterns for these objects.
106+
107+
## 7. getElementsByTagName
108+
109+
Select by a type of element, i want all the images or paragraphs or the h1's on a page.
110+
111+
getElementsByTagName we will get more than one element or potentially we could and that means that the elements returned are going to be stored in a list, we're not going to get a single element back like we got from getElementById.
112+
113+
The elements returned by getElementsByTagName looks like an array it is not an array.
114+
115+
### 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

0 commit comments

Comments
 (0)