Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

9.1 The Selector API

The selector API allows us to select elements from the page using CSS selectors, much like in popular JavaScript libraries such as jQuery.

Syntax

  • querySelector
  • querySelectorAll

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


9.1 The Selector API

Hi folks, we are now in the final section of the course. In this section we're gonna focus on some of the newer web APIs that are available for working with different features of today's modern browsers. Starting with the selector API in this lesson. The selector API gives us the ability to use CSS selectors in order to select elements from the page. Much like we became accustomed to doing through the use of popular JavaScript libraries like jQuery. Using simple CSS selectors in JavaScript was groundbreaking when jQuery first introduced the concept. But it's now supported by defaults natively in today's modern browsers. We don't need to make use of a separate library in order to make use of CSS selectors. The selector API is very simple. It consists of just two methods, querySelector, and querySelectorAll. These methods can be called on documents, document fragments, or on individual elements. And they behave in very similar ways. The querySelector method returns the first element it finds that matches the selector passed to the method So we can see that using an ID selector is very, very similar to using document.getElementById. But we are using a CSS selector, and we can pass any CSS selector to the querySelector method no matter how complex. So instead of selecting the heading, let's select the first child of the list instead. And this time we've managed to select the first child using the css:first-child selector. So this is much more flexible than getElementById which only allows us to select elements using their ID. So querySelector will only return the first element that it finds. So if we were to do something like this instead, We still only get a single list item. If we want to return multiple elements we need to use querySelectorAll instead. And now we get a node list much like we would get returned from one of the methods like getElementsByTagName. So in this lesson we looked at the selector API which is simple and intuitive to use. It works in exactly the way that we would expect and consists of just a couple of simple methods that accept limited arguments. This API is supported in all modern browsers. In the next lesson, we can look at geolocation. Thanks for watching.

Back to the top