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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

8.3 DOM Traversal

In this lesson we’ll see how to traverse from one DOM node to another with code. This will help us map out the structure of the page and understand its contents.

Syntax

  • childNodes
  • children
  • firstChild / lastChild
  • firstElementChild / lastElementChild
  • parentNode
  • nextSibling / previousSibling
  • nextElementSibling / previousElementSibling

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.3 DOM Traversal

Hi, folks. In this lesson we're going to take a look at the different ways in which we can move around a webpage programatically. Starting at one element, and navigating through the tree like dome structure to other elements in the documents. One property that elements have is the child nodes property. And we can use this to access all of the element's child elements. So, this property contains a Node list, which contains all child Nodes of all types. So, let's select the list element from the index page. So, we can select the list from the index page using the getElements/Tagname method, but as this method returns a node list we need to just get the element itself from within that node list. And as there is any one less on the page, that will be the first item in the list and that is item zero. So, we pass zero with square brackets, and that will give us back the first on ordered list, founder of the page. So, now let's inspect the length of the Node list that the UI element has. So, we can see there are three items in the list and we have requested the length of the child nodes property. We actually get back seven even though there are three list items, the line breaks in between each list item are also classed as child nodes. And so, these are included within the child nodes connection. This can be very confusing. So, instead of using child nodes, if we're only interested in working with the elements children of another elements, we can just use children instead of child nodes. This property is also a collection, but it only contains genuine elements. It doesn't include other nodes, like whitespace, or line breaks, or comments. So, now we see three as we were probably expecting the first time. If we want to get just the first, or last child of an element, we can use the first child, or last child properties. And as before when we use the child Nodes property. The first child and last child properties may, or may not point to genuine elements. In this case they're both text Nodes. So, once again, if we only want to consider actual HTML elements, we need to use first element child, or last element child instead. And this time we actually get the list item. So, these properties allow us to travel down the DOM tree from a parent to his children. If we want to access the parents of an element, we can use the parent node property instead. This gives us the body element in this case, because the unordered list is a direct child of the body. Now, notice that this didn't give us any weird text, or comment nodes, or anything like that. Generally, only actual HTML elements can have children. So, even know there is a parent element property, generally, it's fine to use parentNode. The last few properties that we have for DOM traversal, are the next sibling and previous sibling properties. And once again, because next sibling, or previous sibling don't just work with HTML elements, they work with other types of node as well. In this case, we see those pesky test nodes once again. So, as with the other methods, we can use next element sibling, or previous element sibling if we're only interested in working with actual HTML elements. And this time, we get the nodes that we were properly expecting. So, in this lesson, we looked at the different properties we have for traversing the DOM tree from one element to another. We saw that there are several different ways of moving down through the DOM tree and accessing the children of an element using either childNodes children. And then, we can get just the first, or last child of an element using either first child, or last child, or firstElementChild and lastElementChild. We covered moving upwards through the DOM with the parentNode property and moving left, or right through the DOM with the next sibling, previous sibling, nextElementSibling. And previous element siblings properties. In the next lesson, we're going to look at how we can add and remove elements from the page. Thanks for watching.

Back to the top