Menu

Showing posts with label closest method example. Show all posts
Showing posts with label closest method example. Show all posts

JavaScript closest() method

JavaScript closest() method of the Element interface traverses the element until it finds a node that matches the specified CSS selector. 
Syntax of JavaScript closest method syntax is element.closest(css selector).

HTML code snippet


<article>
  <div id="article">
    This is article 
    <div id="title">
      Here is article title
      <div id="description">Here is article description</div>
    </div>
  </div>
</article>

JavaScript closest example

const desElement = document.getElementById("description");

// the closest ancestor with the id of "title"
console.log(desElement.closest("#title")); //this will return <div id="title">

// the closest ancestor which is a div in a div
console.log(desElement.closest("div div")); //this will return <div id="description">

// the closest ancestor which is a div and has a parent article
console.log(desElement.closest("article > div")); //this will return <div id="article">

// the closest ancestor which is not a div
console.log(desElement.closest(":not(div)")); //this will return <article>


Reference

-- https://developer.mozilla.org/en-US/docs/Web/API/Element/closest