From the course: Learning App Building with Vanilla JavaScript
Join today to access over 25,300 courses taught by industry experts.
Select and modify elements with querySelectorAll - JavaScript Tutorial
From the course: Learning App Building with Vanilla JavaScript
Select and modify elements with querySelectorAll
- [Instructor] Our app contains jQuery selector code that returns multiple elements rather than just a single element. We can re-create this behavior in vanilla JavaScript using the querySelectorAll method, which returns a collection of elements. So down on line 89, the selector .options div matches three elements which are the three tabs in the activity results section. So we'll comment that out and we'll start a new line. And this time for the selector, we will use document.querySelectorAll, and we'll pass it the same selector, which is .options div. Now, when a jQuery method is changed to a selector that returns multiple elements, jQuery applies that method to each of the returned elements. This is known as implicit iteration. Now, vanilla JavaScript does not iterate implicitly. Instead, we need to crate a loop structure to move through the selected elements and transform them one at a time. Fortunately vanilla JavaScript includes some methods that make this pretty easy. The…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.