From the course: Interactive Animations with CSS and JavaScript
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Navigating the DOM
From the course: Interactive Animations with CSS and JavaScript
Navigating the DOM
- [Instructor] Now we have our event handler in place. Let's go ahead and write some code to advance the slide to the next one. Let's go back to our code. And go into our click event. Now plain JavaScript has a lotta great functions now to help us maneuver through the DOM, and the first thing I'm gonna do is grab the current slide. So current is going to be document.querySelector, which lets you pass in tag name or class name or whatever like you would use with jQuery or CSS, and it will return one element. So in this case, the one element I wanna return is hp-slide.active, and that is the current slide. And then I'm going to get the next element sibling. So that's a great way to maneuver your way through the DOM. I'm gonna say next equals current.nextElementSibling. Now, if next is non-null, so I'm gonna check this really quick, next. And I know I could put in three equal signs and a null, but I'm not going to do that, I'm sorry. I started coding in 1988, so this is just what you…
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.