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!
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener
and attachEvent
. Times have changed but there are still a few functions each developer should...
![CSS Filters]()
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...
![Create a Simple Slideshow Using MooTools, Part II: Controls and Events]()
Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by:
Adding "Next" and "Previous" controls.
Adding...
![Hot Effect: MooTools Drag Opacity]()
As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...