javascript - 使用 native DOM的最接近祖先匹配选择器？

是否有人在DOM API中使用jQuery.closest()等效项？

看起来Selectors Level 2 draft添加了与jQuery.is()等效的matches()，因此本机最接近的代码应该更容易编写。是否已将closest()添加到选择器中了？

最佳答案

Element.closest()

its support

用Element.matches()实现这种功能似乎在性能上不是最佳的，因为显然，matches()每次您测试 parent 时都会调用querySelectorAll()，而只有一个调用足以完成这项工作。

这是MDN上mostest()的polyfill。请注意对querySelectorAll()的单个调用

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;
  };
}

但是请记住，像这样实现的功能在未附加的树(与document.documentElement根分离)上无法正常工作

//Element.prototype.closestTest = function(s){...as seen above...};

var detachedRoot = document.createElement("footer");
var child = detachedRoot.appendChild(document.createElement("div"));
detachedRoot.parentElement; //null

child.closestTest("footer"); //null

document.documentElement.append(detachedRoot);
child.closestTest("footer"); //<footer>

尽管在Firefox 51.0.1中实现的mostest()似乎可以与分离的树一起正常工作

document.documentElement.removeChild(detachedRoot);
child.closestTest("footer"); //null
child.closest("footer"); //<footer>

关于javascript - 使用 native DOM的最接近祖先匹配选择器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15329167/