JavaScriptで特定のタグを選んで文字列を変更する

お問い合わせからJavaScriptに関する質問がありました。ある特定のクラスを持つタグの文字列を変更したいというものです。質問があるということは、他の方にも需要があるかもしれないので簡単に記事としてまとめてみました。

JavaScriptで特定のタグを指定して取得する方法
JavaScriptでタグ内の文字列を変更する
サンプルコード

JavaScriptで特定のタグを指定して取得する方法

jQueryなどのライブラリを使わなくても、素のJavaScriptだけで何らかの条件を満たしたタグを取得することができます。どのような検索を行うのかで幾つかメソッドが用意されていますが、今回は汎用性の高いDocument.querySelector()とDocument.querySelectorAll()を紹介します。

どちらも使い方はほとんどおなじです。querySelector()は最初にマッチした1つの要素だけを取得でき、戻り値はElement、querySelectorAll()はマッチしたすべての要素を取得でき、戻り値はNodeListです。

引数に渡すのは、CSSに使うのとおなじセレクタの文字列です。

JavaScriptでタグ内の文字列を変更する

querySelector()などで取得したElementに対して、textContentフィールドの変換を行うと文字列が変更できます。

# querySelector()の場合
const qsElement = document.querySelector(".someClass");
qsElement.textContent = "some text";

# querySelectorAll()の場合
const qsaElements = document.querySelectorAll(".otherClass");
qsaElements.forEach(element => {
        element.textContent = "other text";
});

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript質問へのお答え</title>
</head>
<body>

<div>
    <div class="a1">
        <div class="a2"><span class="bbb">だいこん</span></div>
        <div class="a3">２００ｇ</div>
    </div>
        
    <div class="a1">
        <div class="a2"><span class="bbb">にんじん</span></div>
        <div class="a3">１００ｇ</div>
    </div>
        
    <div class="a1">
        <div class="a2"><span class="bbb">たまねぎ</span></div>
        <div class="a3">３００ｇ</div>
    </div>
</div>

<button onclick="qs()">querySelector</button><br>
<button onclick="qsa()">querySelectorAll</button>
<script>
    function qs(){
        const element = document.querySelector(".a3");
        element.textContent = element.textContent + ":added";
    }
    function qsa(){
        const elements = document.querySelectorAll(".bbb");
        elements.forEach(element => {
            element.textContent = element.textContent + ":added";
        });
    }
</script>
</body>
</html>