ある要素から指定するセレクタ―に一致するか判定

ある要素から指定するセレクタ―に一致するか判定するには、element.matchesメソッドを使用します。

  • ※ IE8以下は対応していません。
  • ※ IE9~11を含む古いブラウザはベンダープレフィックス付きで実装されています。

構文

var result = element.matches(selectrString);

引数

引数名 説明
selectrString
必須
string 判定するセレクタ―文字列

戻り値

見つかった(一致)場合はtrue、見つからなかった場合はfalseを返します。

サンプルコード

JavaScript

var sampleElement = document.getElementById('sample'),
    result        = sampleElement.matches('.foo');

if (result) {
	alert('一致');
} else {
	alert('不一致');
}

古いブラウザへの対応

古いブラウザは次のようにポリフィルを用意することで対応可能です。

JavaScript

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

JavaScript逆引きリファレンス一覧へ戻る