Element.matches() メソッドは、要素が特定のセレクター文字列によって選択された場合にtrueを返します。それ以外の場合はfalseを返します。

Internet Explorer はプレフィックス付きの、非標準な名前 msMatchesSelector() で実装されています。

構文

var result = element.matches(selectorString); 
  • result は、戻り値 true または false を返します。
  • selectorString は、テストするためにセレクターを表現する文字列です。

<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

<script type="text/javascript">
  var birds = document.getElementsByTagName('li');

  for (var i = 0; i < birds.length; i++) {
    if (birds[i].matches('.endangered')) {
      console.log('The ' + birds[i].textContent + ' is endangered!');
    }
  }
</script>

要素が実際に値 endangered 持つ class 属性を持つので、これは、コンソールのログに "The Philippine eagle is endangered!" と表示されます。

例外

SYNTAX_ERR
指定されたセレクター文字列は無効です。

Polyfill

Element.matches()Element.matchesSelector() をサポートしないが、document.querySelectorAll() をサポートするブラウザーには、polyfillが存在します:

if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
}

しかし、古いブラウザーをサポートすることの実用性を考えると、実用的なケース (言い換えると IE9+ サポート) ではほとんどの場合 (全部ではない)、次で十分です。

if (!Element.prototype.matches)
    Element.prototype.matches = Element.prototype.msMatchesSelector;

仕様

仕様 ステータス コメント
DOM
Element.prototype.matches の定義
現行の標準 最初の定義

ブラウザー互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
非標準的な名前のオリジナルのサポート

(有)[1]

(有) 3.6 (1.9.2)[2] 9.0[3] 11.5[4]
15.0[1]
5.0[1]
指定されたバージョン 34 (有) 34 (34) No 21.0 7.1
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
非標準的な名前のオリジナルのサポート ? (有) 1.0 (1.9.2)[2] ? ? ?
S指定されたバージョン ? (有) 34.0 (34) ? ? 8

[1] この機能は、非標準の名前 webkitMatchesSelector で実装されていました。

[2] この機能は、非標準の名前 mozMatchesSelector で実装されていました。Gecko 2.0 以前では、無効なセレクター文字列が例外がスローされる代わりに false を返します。

[3] この機能は、非標準の名前 msMatchesSelector で実装されていました。

[4] この機能は、非標準の名前 oMatchesSelector で実装されていました。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: momdo, yoshioms1
最終更新者: momdo,