Vanilla JavaScript .closest without jQuery

Question

I\'m working on an application that only has jQuery 1.1 installed which dosn\'t support the .closest method.

My script currently looks like this:

$(\         


        

Answer 1

Cause IE still does not support element.closest() the simplest thing to do is use include the polyfill from MDN Element.closest() . Include it at the very beginning of your javascript codes.

For browsers that do not support Element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), include this polyfill:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

However, if you really do require IE 8 support, then the following polyfill will do the job very slowly, but eventually. However, it will only support CSS 2.1 selectors in IE 8, and it can cause severe lag spikes in production websites.

if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest =
  function(s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i,
        el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {};
    } while ((i < 0) && (el = el.parentElement));
    return el;
  };
}

Answer 2

Modern browsers have the Element.closest() method.

Example:

document.querySelector('.navPanel img').closest('td')

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

Here you can check which browsers have built-in support: https://caniuse.com/#feat=element-closest

When there is no support in the browser the following polyfill could be used: https://github.com/jonathantneal/closest

Answer 3

myImage.parentNode;

Is as vanilla as it gets. Whack that in a loop until you hit the required tag type:

while(thisTag.parentNode.tagName !== 'TD') // uppercase in HTML, lower in XML
    {
     thisTag=thisTag.parentNode;
    }

That should do the trick in plain old js.

Danny