JavaScript closest
When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and querySelector
/querySelectorAll
for that relationship in selectors. What if we want to find an element's parent based on selector?
To look up the element tree and find a parent by selector, you can use HTMLElement
's closest
method:
// Our sample element is an "a" tag that matches ul > li > a
const link = document.querySelector('li a');
const list = a.closest('ul');
closest
looks up the ancestor chain to find a matching parent
element -- the opposite of traditional CSS selectors. You can provide closest
a simple or complex selector to look upward for!
![9 Mind-Blowing Canvas Demos]()
The <canvas>
element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![Fullscreen API]()
As we move toward more true web applications, our JavaScript APIs are doing their best to keep up. One very simple but useful new JavaScript API is the Fullscreen API. The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...
![Create Spinning, Fading Icons with CSS3 and jQuery]()