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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

8.1 Selecting HTML Elements

In this lesson I’ll show you the different DOM methods we can use to select elements from the page so that we can work with them programmatically.

Syntax

  • getElementById
  • getElementsByClassName
  • getElementsByTagName

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


8.1 Selecting HTML Elements

Hi folks. In this section, we're going to focus on using JavaScript to work specifically with HTML pages, and the different elements they contain. Starting with the different ways that we can select elements from the page in this lesson, working with web pages programmatically is not a goal of the core ECMAscript specification that JavaScript is based on. But the W3C have also added a number of specifications for working with the DOM, or the Document Object Model, as it's officially known, which represents a web page. A web page is made up of individual nodes, which constitute the different elements that make up the page. These elements, or nodes, are organized in a tree structure, where some nodes are parents, and some nodes are children, or siblings, of other nodes. Let's just add an element to our index page. We do have some elements on here already, but these are elements that we don't usually work with in JavaScript very often. So let's just add a heading. Okay so our index.html page now contains a heading. And we've given this heading an ID of mainheading, and the heading has some text. One of the fastest and easiest ways of selecting an element from the page is by using the getElementByID method. So let's select the heading that we just added. And let's take a look at the output in the browsers console. And we can see that it has logged the heading node to the console. So the getElementByID method is a method of the document object. And the document object represents the web page as a whole. Remember the window object represents the browser. The document object represents the page loaded within the browser. So the getElementById method returns a reference to an element. But if there isn't an element with the specified ID on the page, the method returns null. So the getElementById method returns a single object. Elements on the page should always have unique IDs, so the getElementById method will always return a single elements. Or null if there aren't any matching elements. But it should always return a single element if there is an element matching the ID. So if we want to get a collection of elements instead of a single element, there are a couple of different methods that we could use. Let's just go back and add some different elements to the page now as well So I've added a simple, unordered list with three list items. Each of these list items has the class item. So if we want to get all of the elements that have a particular class name, we can use the getElementsByClassName method instead. Now we can see that we have a collection of the matching elements from the page. Now it looks very much like an array. But just like the arguments object within a function, it's only an array-like collection. It's actually a node collection, or an element collection. It's not a true array. So we can't call true array methods on it. Just something to be aware of. We can also get all of the elements of a certain type. So, let's imagine that the list items didn't have a class name. We could still select them all by using the getElementsByTagName method instead. And we see another identical collection of list Items. Some elements, like form elements for example, can have a name attribute. And we can also select all elements that have a particular name attribute using the getElementsByName method. This method works in the same way, and returns the same type of object, as the getElementsByClassName and getElementsByTagName methods. So in this lesson, we looked at some of the different DOM methods we have for selecting elements, or collections of elements, from the page through the document interface. We looked at getElementByID, which is by far the fastest way to select a single element. And we looked at the getElementsByClass name and getElementsByTagName methods, which can return lists of nodes or DOM elements. In the next lesson, we'll move on to look at how we can manipulate elements once we have selected them from the page. Thanks for watching.

Back to the top