querySelectorを使うことで、HTML要素の入れ子(ネスト）を考慮した要素の取得を簡単に記述できます。
この記事で分かること
- 入れ子になっているHTML要素の取得方法(querySelector)
querySelectorによる入れ子要素の取得
サンプルHTMLについて
以下のHTML文書から取得するものとします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="ul1" id="ul1id">
<li id="ul1_li1" class="li_class item1" name="name1">a</li>
<li id="ul1_li2" class="li_class item2" name="name2">b</li>
</ul>
<ul class="ul2" id="ul2id">
<li id="ul2_li1" class="li_class item1" name="name1">f</li>
<li id="ul2_li2" class="li_class item2" name="name2">g</li>
</ul>
<script src="test.js"></script>
<script src="domSelectorTest.js"></script>
</body>
</html>querySelectorによる取得
querySelectorで入れ子の要素を取得する場合、引数の文字列内で>により入れ子構造を指定します。また、親と子の指定方法(id,class,tagなど)は混在可能です。
文法
document.querySelectorAll("親の指定 > 子の指定")親の指定に合致するHTML要素の配下で、子の指定に合致する要素を抽出します。
例
console.log('--- 1.HTMLタグ配下のHTMLタグを指定 ---');
console.log(document.querySelectorAll("ul > li"));
console.log('--- 2.クラス配下のHTMLタグを指定（指定方式の混在可） ---');
console.log(document.querySelectorAll(".ul2 > li"));
console.log('--- 3.id配下のクラスを指定（指定方式の混在可） ---');
console.log(document.querySelectorAll("#ul2id > .item1"));[結果]
--- 1.HTMLタグ配下のHTMLタグを指定 ---
NodeList(4) [li#ul1_li1.li_class.item1, li#ul1_li2.li_class.item2, li#ul2_li1.li_class.item1, li#ul2_li2.li_class.item2]
--- 2.クラス配下のHTMLタグを指定（指定方式の混在可） ---
NodeList(2) [li#ul2_li1.li_class.item1, li#ul2_li2.li_class.item2]
--- 3.id配下のクラスを指定（指定方式の混在可） ---
NodeList [li#ul2_li1.li_class.item1]
入れ子になっている要素の親子関係を指定して要素を取得できました。
まとめ
本記事ではquerySelectorを使って入れ子になっているHTMLの要素を取得する方法を記載しました。
