使用 JavaScript 通過選擇器獲取最近的元素

要通過選擇器獲取最近的元素，可以使用元素的 closest() 方法。此方法以目標 Element 開頭 並在 DOM 樹中向上遍歷其祖先，直到找到與選擇器匹配的元素。

closest() 方法返回匹配選擇器的第一個元素。如果不存在這樣的元素，則返回 null .

假設您有以下 HTML 代碼片段：

<article>
    <h2 class="title">How to learn JavaScript</h2>
    <div class="meta">
        <p class="subtitle">12 tips to learn JavaScript quickly and free.</p>
        <time class="published">August 21, 2019</time>
    </div>
</article>

以下示例選擇最近的 <div> 被選元素的元素：

const elem = document.querySelector('time');

// select closest <div>
const div = elem.closest('div');

console.log(div.classList[0]); // meta

這是另一個選擇最近的 <article> 的示例 DOM 樹中的元素：

const elem = document.querySelector('time');

const article = elem.closest('article');

console.log(article.tagName); // article

closest() 方法不適用於兄弟姐妹。例如，您不能選擇 <p> 標記，因為它是 <time> 的兄弟 而不是它的父母。同樣的邏輯適用於 <h2> 標記，因為它不是 <time> 的父節點 在 DOM 樹中：

elem.closest('p'); // null
elem.closest('h2'); // null

要選擇元素的同級元素，您必須首先選擇最近的父元素，然後使用 querySelector() 在裡面找到兄弟姐妹：

elem.closest('div').querySelector('p').innerText; 
// 12 tips to learn JavaScript quickly and free.

elem.closest('article').querySelector('h2').innerText; 
// How to learn JavaScript

closest() 方法僅適用於現代瀏覽器，不支持 Internet Explorer。要支持 IE9 及以上版本，可以使用以下 polyfill：

// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#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;
  };
}