「脱jQuery」 生JSで.closest()のように直近の親要素を取得する

jQueryでは直近の親要素を取得するときに便利な .closest() 関数が実装されています。生JSでどのように書くことができるのか紹介します。

jQuery


$('.selector').closest('.target');

.selector から 最も近く て、クラス名が .target である 親要素 を取得します。

生JS


function closest(node, selector) {
  // IEや一部ブラウザでは.closet()が実装されていないので自前も用意
  return (node.closest || function(_selector) {
    do {
      // nodeとselectorがマッチしたら返す
      if ((node.matches || node.msMatchesSelector).call(node, _selector)) {
        return node;
      }
      // マッチしなかったら親要素を代入
      node = node.parentElement || node.parentNode;
    } while (node !== null && node.nodeType === 1);

    return null;
  }).call(node, selector);
}

モダンブラウザでは .closest() が実装されているのでそのまま使うことができますが、 IE などでは実装されていないので自分で書く必要があります。


closest(document.querySelector('.selector'), '.target');

このように使うことができます。

CSS本執筆しました!!!