はじめに
matchesメソッドは、特定の要素がCSSセレクターにマッチするかどうかを確認するために使用されます。詳細な説明、引数、戻り値、さらには実践的な使用例を通じて、このメソッドの機能を深く理解することを目指します。
JavaScriptのmatchesメソッドとは
JavaScriptのmatches()メソッドは、Elementインターフェイスの一部であり、特定の要素が与えられたCSSセレクターにマッチするかどうかを判断します。
このメソッドはブーリアン値を返し、要素がセレクターにマッチする場合はtrue、そうでない場合はfalseを返します。この機能は、特定の要素が特定のスタイルルールや条件に適合するかを動的に調べる際に非常に便利です。
サルモリ
だから、例えばページ内の特定のリンクをハイライト表示したい時に、matches()を使って条件に合う要素だけを選択できるんだね！
アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
基本的な使用法
matches()メソッドは以下のように使用します。
element.matches(selectorString);
ここでelementは対象のHTML要素、selectorStringはCSSセレクターを表す文字列です。
ソースコード例
|
1 2 3 4 5 6 7 8 |
document.addEventListener('DOMContentLoaded', function() { var element = document.querySelector('#unique-element'); if (element.matches('.highlight')) { console.log('Element matches the ".highlight" selector.'); } else { console.log('Element does not match the ".highlight" selector.'); } }); |
出力結果
Element does not match the ".highlight" selector.
サルモリ
これで、#unique-elementが.highlightクラスにマッチするかどうかをチェックできるんだね！簡単で便利だなあ。
複数のセレクターでのマッチング
matches()メソッドは複数のセレクターを組み合わせて使用することも可能です。これにより、より複雑な条件での要素の選択が可能になります。
例えば、特定のクラスに属し、特定の属性を持つ要素を選択したい場合などに有効です。
ソースコード例
|
1 2 3 4 5 6 7 8 |
document.addEventListener('DOMContentLoaded', function() { var elements = document.querySelectorAll('a'); elements.forEach(function(element) { if (element.matches('.external[href^="http"]')) { console.log('This is an external link: ', element.href); } }); }); |
出力結果
This is an external link: http://example.com
サルモリ
外部リンクだけを簡単に見つけられるなんて、matches()って本当に便利だね！
まとめ
この記事では、matches()メソッドの基本的な使用方法から、複数のセレクターを使った高度な使用方法までを解説しました。
このメソッドを活用することで、JavaScriptでのDOM操作がより柔軟かつ効率的になります。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
サルモリ
最後まで読んでくれてありがとう！！
