JavaScript | querySelectorAll()での要素の取得にワイルドカードを使うパターン集
JavaScriptのquerySelectorAll()を使って要素の取得にワイルドカードを使う色々なパターンを紹介しています。
全てのHTML要素を取得する
querySelectorAll()でワイルドカードを使ってページに出力されている全てのHTML要素を取得するサンプルコードです。
htmlからbody、meta要素、scriptタグなど全てのHTML要素を取得します。
let target_child = document.querySelectorAll('*');
// [html, script, head, meta, meta, meta, style, title, body, h1, div#target, div, p, p, div#container, div, canvas#canvas, script]特定の要素の子要素を全て取得する
querySelectorAll()でワイルドカードを使って特定の要素の子要素を全て取得するサンプルです。
<div id="target">
<div></div>
<p></p>
<span></span>
</div>let targets = document.querySelectorAll(｀#target *｀);
// [div, p, p]特定のid名を含む要素を全て取得する
querySelectorAll()でワイルドカードを使って特定のid名を含むHTML要素を全て取得するJavaScriptのサンプルコードです。
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>let targets = document.querySelectorAll(｀#target *｀);
// [div#target1, div#target2, div#target3]特定のid名で始まる要素を全て取得する
querySelectorAll()でワイルドカードを使って特定のid名で始まるHTML要素を全て取得するJavaScriptのサンプルコードです。
<div id="target1"></div>
<div id="target2"></div>
<div id="new_target"></div>let targets = document.querySelectorAll(`[id^='target']`);
// [div#target1, div#target2]特定のid名で終わる要素を全て取得する
querySelectorAll()でワイルドカードを使って特定のid名で始まるHTML要素を全て取得するJavaScriptのサンプルコードです。
以下の場合、3つ目のHTML要素のみを取得します。
<div id="target1"></div>
<div id="target2"></div>
<div id="target"></div>let targets = document.querySelectorAll(`[id$='target']`);
// [div#target]特定のid名を含まない要素を全て取得する
querySelectorAll()でワイルドカードを使って特定のid名を含まない要素をdiv全て取得するJavaScriptのサンプルコードです。
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>let targets = document.querySelectorAll(`div:not([id*='target1']`);
// [div#target2, div#target3]※上記の場合、id名が指定されていないdiv要素も取得します
特定のclass名を含む要素を全て取得する
querySelectorAll()で特定のclass名を含む要素を全て取得するJavaScriptのサンプルコードです。
この場合、特別な指定は必要なくclass名を指定します。
<div class="target"></div>
<h1 class="target"></h1>
<p class="target"></p>let targets = document.querySelectorAll(`.target`);
// [div.target, h1.target, p.target]特定のclass名を含まない要素を全て取得する
querySelectorAll()で特定のclass名を含まないHTML要素を全て取得するJavaScriptのサンプルコードです。
:not()を使って指定しています。
<div class="target aaa"></div>
<h1 class="target bbb"></h1>
<p class="target aaabbb"></p>let targets = document.querySelectorAll(`.target:not([id*='aaa']`);
// [h1.target.bbb]特定のリンク先にリンクしているaタグを取得する
特定のリンク先にリンクしているaタグを全て取得するサンプルコードになります。
以下の場合、youtubeにリンクしているaタグのみを取得します。
<p><a class="link" href="https://1-notes.com/"></a></p>
<p><a class="link" href="https://youtube.com/"></a></p>
<p><a class="link" href="https://youtube.com/"></a></p>let targets = document.querySelectorAll('a[src*="youtube.com"]');
// [a.link, a.link]