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.