Skip to content

Commit 190c28b

Browse files
elfgoddelfgodd
committed
Section 13: querySelector & querySelectorAll
1 parent b63aeb3 commit 190c28b

4 files changed

Lines changed: 170 additions & 8 deletions

File tree

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// ******************************
2+
// querySelector & querySelectorAll ******************************
3+
// Example 1
4+
console.log('\n')
5+
6+
const firstH1 = document.querySelector('h1')
7+
console.log('firstH1: ', firstH1)
8+
console.dir(firstH1)
9+
console.log(firstH1.innerText)
10+
11+
// Example 2
12+
console.log('\n')
13+
// This won't work we need to use querySelectorAll
14+
// const secondP = document.querySelector('p')[1]
15+
// console.log('secondP: ', secondP);
16+
// console.log(secondP)
17+
// console.log(secondP.innerHTML);
18+
19+
// Example 3
20+
console.log('\n')
21+
const selectById = document.querySelector('#bear-photo')
22+
console.log('selectById: ', selectById)
23+
console.dir(selectById)
24+
console.log(selectById.src)
25+
26+
// Example 4
27+
console.log('\n')
28+
// Both examples do the same
29+
// Getting the same paragraph
30+
console.log(document.querySelector('#main'))
31+
console.log(document.getElementById('main'))
32+
33+
// Example 5
34+
console.log('\n')
35+
console.log(document.querySelector('.special'));
36+
37+
// Example 6
38+
console.log('\n')
39+
// This is just valid CSS, no new syntax
40+
console.log(document.querySelector('li.special'))
41+
42+
// Example 7
43+
console.log('\n')
44+
// Using valid CSS syntax
45+
console.log(document.querySelector('section ul li.special'))
46+
47+
// Example 8
48+
console.log('\n')
49+
console.log(document.querySelector('input'))
50+
console.log(document.querySelector('input[type="password"]'));
51+
52+
// Example 9
53+
console.log('\n')
54+
console.log(document.querySelectorAll('input'))
55+
console.log(document.querySelectorAll('li'))
56+
console.log(document.querySelectorAll('#main'))
57+
58+
// Example 10
59+
console.log('\n')
60+
const specials = document.querySelectorAll('.special')
61+
// Type (special.) to see available options
62+
console.log('specials: ', specials)
63+
console.log('specials[0]: ', specials[0]);
64+
console.log('specials.length: ', specials.length)

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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>First Paragraph 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">Second Paragraph 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+
Paragraph special outside the UL
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+
<section>
39+
<ul>
40+
<li>Carrot</li>
41+
<li class="special">Peas</li>
42+
<li>Broccoli</li>
43+
</ul>
44+
</section>
45+
<script src="app.js"></script>
46+
</body>
47+
</html>

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

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ to go follow a tutorial online.
2626

2727
We can write JavaScript that can:
2828

29-
- Figure out how many h1's <h1></h1> are on a page
30-
- How many input's <input></input> are in a form <form></form>
31-
- Get the value from a form <form></form>
32-
- If a user is typing into the form <form></form>
33-
- Change the value of a <form></form>
34-
- Change images <img></img>, make them bigger
35-
- Change CSS styles <style></style> of anything
29+
- Figure out how many h1's `<h1></h1> `are on a page
30+
- How many input's `<input></input>` are in a form `<form></form>`
31+
- Get the value from a form `<form></form>`
32+
- If a user is typing into the form `<form></form>`
33+
- Change the value of a `<form></form>`
34+
- Change images `<img></img>`, make them bigger
35+
- Change CSS styles `<style></style> `of anything
3636
- Add animations
3737
- Listen for: clicks, drag's, hovers or any sort of event that a user could trigger
3838
and then have some behavior that happens in response
@@ -68,7 +68,7 @@ This object represents the entire page, this entire document https://developer.m
6868

6969
There's all of these different methods and properties available and they're all container within the **document object**. So the **document** is the entry point that we use to access the DOM, to manipulate things, to just view the content in the **DOM**, but also to add events add functionality, it's all located inside of this one object.
7070

71-
```
71+
```javascript
7272
// Run in the browser console
7373
document.images
7474
document.all
@@ -121,3 +121,34 @@ It is an array like object that is not an array, it's a type in the DOM and a ty
121121
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**.
122122

123123
If i try and select based on of an ID, it's not going to work.
124+
125+
## 9. querySelector & querySelectorAll
126+
127+
### querySelector
128+
129+
- A newer, all-in-one method to select **a single element**
130+
- Pass in a CSS selector
131+
132+
```javascript
133+
// Finds first h1 element:
134+
document.querySelector('h1');
135+
136+
// Finds first element with ID of red:
137+
document.querySelector('#red');
138+
139+
// Finds first element with class of
140+
document.querySelector('.big');
141+
```
142+
143+
**querySelector** it's like the swiss army knife of DOM selectors, it can select everything that we used. It can replicate the functionality of all of the selectors here.
144+
145+
We can select by an ID or a tag name or a class name or many other criteria.
146+
147+
**This only returns a single element at most**.
148+
149+
### querySelectorAll
150+
Same idea, but returns **a collection** of matching elements
151+
152+
**querySelectorAll** which does the same thing except it returns a collection
153+
154+
A **NodeList** is returned with **querySelectorAll** and is another array like object

0 commit comments

Comments
 (0)