※スマホ対応はしてません。

タグ: .matches()

el.closest()で直近の要素を探せるかもね。(DOMおれおれAdvent Calendar 2015 – 04日目)

カテゴリー: JavaScript

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では実装済み。

参考

el.matches()で要素が目的のものか確認できるよ。(DOMおれおれAdvent Calendar 2015 – 03日目)

カテゴリー: JavaScript

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

2015-12-03

書き忘れてた。jQueryのis()みたいな感じです。

var elBody = document.querySelector('body');
var loading = elBody.matches('.is-loading');

クラスの有無や要素名だけなんかなら他のAPIでも良いのだけど、ちょっと複雑になると難しい。そんなときこそこの matches() が便利。

var matched = el.matches('#foo ul.bar > li > a[href^="#"]');
if (matched) {
  alert('OK!');
}

環境

昔は el.matchesSelector() という名前で進められていたみたいで、古いやつだとそっちじゃないとだめかも。

IEでは機能は9+で実装済みだけど、 el.msMatchesSelector() という名前なので注意が必要。最新版の11やEdgeでもだ。

Android Browserも el.webkitMatchesSelector() だった、のが最新のOSならChromeが載ってて、こっちはそのまま el.matches() で通る。たぶん。

その他

仕様はLiving Standardだけみたい。

参考