現代のブラウザでは要素(Element)を取得する際にセレクタAPIを使い柔軟に取得できます。
以前まではgetElementByIdやgetElementsByName、getElementsByClassName、getElementsByTagNameなどで取得する条件にに応じてこれらのメソッドを使い分けていたところを解決してくれるようになりました。
セレクタAPIは引数のセレクタ文字列によって取得する条件を指定できるので現在のJavaScriptでは基本的にこの方法で取得します。
目次
セレクタAPI
| メソッド | 説明 |
| querySelector(selector) | selectorの引数に一致する最初の要素を取得 |
| querySelectorAll(selector) | selectorに一致した全ての要素を格納した配列風オブジェクトを取得 |
1つだけ取得したいときはquerySelector、複数取得したいときはquerySelectorAllという認識でOKです！
セレクタ文字列とはJavaScriptやCSSからHTMLを取得するための使用される文字列のことです
セレクタAPIで使用可能な文字
タグに一致
<div>タグ</div>const test = document.querySelector('div');idの属性値に一致
<div id="target">タグ</div>const test = document.querySelector('#target');属性名に一致
<input disabled>const test = document.querySelector('[disabled]');属性名に一致
<input disabled>const test = document.querySelector('[disabled]');属性値の先頭一致
<a href="https://example.com">リンク</a>const test = document.querySelector('[href^=http]');属性値の後方一致
<a href="sample.pdf">リンク</a>const test = document.querySelector('[href$=http]');属性値の部分一致
<input name="text-1">
<input name="text-2">const test = document.querySelector('[href*=http]');セレクタの直後にある要素を取得
<div></div>
<h1></h1>const test = document.querySelector('div + h1');divの直後にあるh1を取得することになります。
2つ以上のクラスが存在する箇所を取得
<div class="cls1 cls2"></div>const test = document.querySelector('.cls1.cls2');隣接関係を取得
<div></div>
<span></span>
<h1></h1>const test = document.querySelector('div ~ h1');divの兄弟、かつその後のh1を取得
まとめ
セレクターAPIについて解説しました。
セレクタ文字列に関しては一部になりますがよく使うものやちょっとしたマニアックな文字列は上記で賄えるかなと思ってます。
JavaScriptでHTMLの要素を取得する時には頻繁に記述されてくるのでわからなくなったら見返してみるといいかもしれません。
最後までご覧いただき、ありがとうございます。
ご不明点やご相談、お仕事の依頼はいつでもお気軽にご連絡ください。
コメント