JavaScript | querySelectorAll()で子要素を取得するパターン集

2021-02-03JavaScript CSSセレクタ,JavaScript

JavaScriptでHTMLの親要素から子要素を取得するのサンプルコードのパターン集です。

このページではquerySelectorAll()を利用した方法を紹介しています。

See the Pen JavaScript | get child elements by yochans (@yochans) on CodePen.

共通HTMLと簡単な説明

サンプルコードで利用している共通のHTMLです。

親要素のdivタグの中に、2つのdivタグ、2つのpタグを作成しています。

<div id="parent">
	<div id="child_01"></div>
	<div id="child_02"></div>
	<p id="child_03" class="abc"></p>
	<p id="child_04" class="abc"></p>
</div>

サンプルにて取得する結果は全てnodeデータになります。

また、取得する目的の要素がひとつと確定しているものはquerySelectorAll()ではなくquerySelector()での利用も可能ですが、取得結果の確認方法に差異が生じるため、理解しやすさから、このページでは全てquerySelectorAll()で作成しています。

全ての子要素を取得

指定した要素以下の全ての子要素を取得します。

let elements = document.querySelectorAll('#parent *');
//div1 div2 p1 p2

最初の子要素を取得

指定した要素以下にある最初の子要素を取得します。

let first_children = document.querySelectorAll('#parent :first-child');
//div1

最後の子要素を取得

指定した要素以下にある最後の子要素を取得します。

let last_children = document.querySelectorAll('#parent :last-child');
//p2

divタグの子要素を取得

指定した要素以下にあるdivタグの子要素を取得します。

let div_children = document.querySelectorAll('#parent div');
//div1 div2

pタグの子要素を取得

指定した要素以下にあるpタグの子要素を取得します。

let p_children = document.querySelectorAll('#parent p');
//p1 p2

pタグ以外の子要素を取得

指定した要素以下にあるpタグ以外の子要素を取得します。

let not_p_children = document.querySelectorAll('#parent :not(p)');
//div1 div2

クラス名「.abc」を持つ子要素を取得

指定した要素以下にあるクラス名「.abc」を持つ子要素を取得します。

let abc_children = document.querySelectorAll('#parent .abc');
//p1 p2

クラス名「.abc」を持たない子要素を取得

指定した要素以下にあるクラス名「.abc」を持たない要素を取得します。

let not_p_children = document.querySelectorAll('#parent :not(.abc)');
//div1 div2