JavaScript

【JavaScript】入れ子になっているHTML要素を取得する（querySelector）

  /

querySelectorを使うことで、HTML要素の入れ子(ネスト）を考慮した要素の取得を簡単に記述できます。

この記事で分かること
  • 入れ子になっているHTML要素の取得方法(querySelector)
Contents
  1. querySelectorによる入れ子要素の取得
  2. まとめ

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>
Markup

querySelectorによる取得

querySelectorで入れ子の要素を取得する場合、引数の文字列内で>により入れ子構造を指定します。また、親と子の指定方法(id,class,tagなど)は混在可能です。

文法
document.querySelectorAll("親の指定 > 子の指定")
JavaScript

親の指定に合致する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"));
JavaScript
[結果]
--- 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]
Markup

入れ子になっている要素の親子関係を指定して要素を取得できました。

まとめ

本記事ではquerySelectorを使って入れ子になっているHTMLの要素を取得する方法を記載しました。

 

JavaScript
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

コメントは日本語で入力してください。(スパム対策)

CAPTCHA