JavaScript | querySelectorAll()での要素の取得にワイルドカードを使うパターン集

JavaScript,javascript CSSセレクタ

JavaScript

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]