How can I select the closest HTML5 element with JavaScript?

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?”

  1. 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
      }
    })
    
    Reply

Leave a Comment