How can I select the closest HTML5 element with JavaScript?

February 16, 2021 by admin

We’re integrating analytics into an app, and we’re looking to grab the location of an element. In this case, there is no good div that gives a location, so we’re trying to grab the nearest html5 element.

Is this possible using .closest? Can I pass an array of tags [‘header’, ‘article’, section], and the nearest element that the clicked element is near is selected?

var tabs = Array.from(document.querySelectorAll('.details'));

function handleTabClick(e){

    var tabNode = e.target;
    tabLabel = tabNode.innerText;

   
};

tabs.forEach(function (tab) {
    tab.addEventListener('click', handleTabClick);
});

14 thoughts on “How can I select the closest HTML5 element with JavaScript?”

I would delegate from nearest STATIC html container or from the document

document.addEventListener("click",function(e) {  
  const tgt = e.target;
  if (tgt.tagName==="SECTION" || tgt.closest("section")....) {
   // handle section
  }
  else if (tgt.tagName==="ARTICLE" || tgt.closest("article")....) {) {
   // handle article
  }
})