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だけみたい。

参考