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 の定義
現行の標準 最初の定義

ブラウザー互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,