DOMおれおれAdvent Calendar 2015 – 04日目

2015-12-04

jQueryのclosest()みたいな感じですってまんまだな。

var elForm = elButton.closest('form');
elForm.submit();

元の要素から上位（親とその親とそのまた親と……）の要素を走査して、セレクターに合致するものを返します。なければ null 。親だけじゃなくて元の要素自身も含みます。

ポリフィル

上位の要素を辿りながら .matches() で確認していけばよろしい。見つからない場合は null を返します。

function getClosest(el, selector) {
  var cur;
  for (cur=el; cur; cur=cur.parentElement) {
    if (cur.matches(selector)) {
      break;
    }
  }
  return cur;
}

ちなみに document は要素じゃないから対象外です。なので parentNode ではなく parentElement で辿る。

環境

IEでは未実装。

Androidも未実装。Android版Chromeでは実装済み。

参考