🐙

querySelectorAllでulやli要素を取得する方法

2023/09/26に公開

概要

querySelectorAllでulやli要素を取得する方法について記載します。

まず、対象となるHTMLを示します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>querySelectorAll</title>
</head>
    <body>
        <ul>
            <li class="first">香南市</li>
            <li class="second">南国市</li>
            <li class="third">須崎市</li>
        </ul>

        <ol>
            <li class="first">枕草子</li>
            <li class="second">方丈記</li>
            <li class="third">徒然草</li>
        </ol>
    </body>
</html>

li要素の値を取得する

[...document.querySelectorAll("li")].map(e => e.innerText)

// ['香南市', '南国市', '須崎市', '枕草子', '方丈記', '徒然草']

ol要素下のli要素を取得する

[...document.querySelectorAll("ol li")].map(e => e.innerText)

// ['枕草子', '方丈記', '徒然草']

firstクラスが付与されたli要素を取得する

[...document.querySelectorAll("li.first")].map(e => e.innerText)

// ['香南市', '枕草子']

firstクラスまたはsecondクラスが付与されたli要素を取得する

[...document.querySelectorAll("li.first, li.second")].map(e => e.innerText)

// ['香南市', '南国市', '枕草子', '方丈記'] 

Discussion