2020-02-06 #javascript #vanilla-js #javascript-framework-diet
Selecting elements (part 2)
In Selecting elements (part 1) we learned how to select elements from the DOM, and how to find elements inside other elements, both with our own $
and $$
helpers.
In part 2, we're going to review two DOM element instance methods: closest
and matches
.
Finding the nearest matching parent with closest
Element.closest()
traverses the DOM upwards until it finds a parent that matches the specified selector. If nothing was found, it returns null
.
While querySelector
allows you to find all elements contained in another element, closest
allows you to find an element in which another element is contained in.
<ul data-image-gallery> <li><img></li> <li><img></li></ul>
$$('img').forEach(image => { // Log the parent gallery console.log( image.closest('[data-image-gallery]') );});
Read all about Element.closest()
on MDN.
Testing selectors on an element with matches
Sometimes you have an element, but want to know whether it matches a certain selector. Here's where Element.matches()
comes in.
matches
returns true
or false
depending on whether the selector applies to the element or not.
<input type="text"><input type="email"><input type="checkbox">
$$('input').forEach(input => { if (input.matches('[type="checkbox"]')) { // Do something... } // Do something else...});
Read all about Element.matches()
on MDN.
Element.closest()
and Element.matches()
will be used a lot more sparingly than $
and $$
. They're lesser known but very powerful when needed.