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">200g</div>
    </div>
        
    <div class="a1">
        <div class="a2"><span class="bbb">にんじん</span></div>
        <div class="a3">100g</div>
    </div>
        
    <div class="a1">
        <div class="a2"><span class="bbb">たまねぎ</span></div>
        <div class="a3">300g</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>
MENTAプラン紹介
フリーランスITエンジニアに関する相談にのります

フリーランスITエンジニアになりたい、けれど不安があるという方向けの相談サービスです。

長期ブランクという苦境を乗り越えてフリーランスとして独立した私、土谷俊介があなたの不安を取り除きます。

プログラム
スポンサーリンク
土谷 俊介をフォローする
ツチヤの備忘録

コメント

タイトルとURLをコピーしました