【JavaScript入門】DOM操作でテキストの取得・変更・削除をする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作でテキストの取得・変更・削除をする方法を解説していきます。

1 HTML要素のテキストの操作(取得・変更, 追記・削除)をする
2 Sample-Code-全文
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 【おすすめ関連記事】
8 最近の投稿

HTML要素のテキストの操作(取得・変更, 追記・削除)をする

テキストの取得

HTML要素(HTML-Element)のtextContentプロパティを使ってテキストの取得ができます。

構文:let text = element.textContent;

<h3 class="robotama">ただのロボ玉🔥</h3>


<script>

// 1. HTML-Elementを取得する
const robotama = document.querySelector('.robotama');

// 2. テキストの取得 => element.textContent;
const roboText = robotama.textContent;
console.log({roboText});
    // {roboText: 'ただのロボ玉🔥'}

</script>

テキストの変更

テキストの変更をしたい場合は、textContentに値を代入します。

構文: element.textContent = ‘ New-Text’;

代入するので、既存のテキストは上書きされます。

<h3 class="robotama-type">ロボ玉</h3>

<script>

// 1. HTML-Elementを取得する
const robotamaType = document.querySelector('.robotama-type');

// 2. テキストの変更 => element.textContent = 'New-Text';
robotamaType.textContent = '可愛いロボ玉';

console.log({kawaiiRobotama: robotamaType.textContent});
    // {kawaiiRobotama: '可愛いロボ玉'}

</script>

テキストの追記

テキストの追記は、既存のテキストに追加したいテキストをプラスします。

構文: element.textContent += ‘Add-Text’;

<h3 class="robotama-type">ロボ玉</h3>

<script>

// 1. HTML-Elementを取得する
const robotamaType = document.querySelector('.robotama-type');


robotamaType.textContent = '可愛いロボ玉';

console.log({kawaiiRobotama: robotamaType.textContent});
    // {kawaiiRobotama: '可愛いロボ玉'}

// 2. テキストの追記 => element.textContent += 'Add-Text';
robotamaType.textContent += '試作1号機🔥'

console.log({robotamaType: robotamaType.textContent});
    // {robotamaType: '可愛いロボ玉試作1号機🔥'}

</script>

テキストの削除

テキストの削除は空文字をtextContentに代入することで実装できます。

構文: element.textContent = ”;

<h3 class="saitama">飛んで埼玉！</h3>

<button id="flyaway-saitama" type="button" onclick="FlyAwaySaitama()">
  これを押しては、いけません・・・
</button>

<script>

// 1. HTML-Elementを取得する
const flyawayButton = document.querySelector('#flyaway-saitama');

function FlyAwaySaitama (){    

    // 2. テキストの削除　=> element.textContent = '';
    saitama.textContent = '';
}

</script>

Sample-Code-全文

<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>DOM-Text-操作🔥</title>
</head>
<body>
    <h1>DOM-Text-操作するロボ玉🔥</h1>

    <p>取得した要素内のテキストの操作(取得・変更, 追記・削除)をしていきます。</p>

    <h2>1. テキストの取得</h2>
    <p>構文: let text = element.textContent;</p>
    <p>textContentプロパティを使ってテキストの取得ができます。</p>

    <h2>2. テキストの変更</h2>
    <p>構文: element.textContent = 'Hello';</p>
    <p>テキストの変更はtextContentに値を代入するだけです。</p>
    <p>既存のテキストは上書きされるので、注意です。</p>

    <h2>3. テキストの追記</h2>
    <p>構文: element.textContent += '追加テキスト';</p>
    <p>既存のテキストに追加したいテキストをプラスします。</p>

    <h2>4. テキストの削除</h2>
    <p>構文: element.textContent = '';</p>
    <p>textContentに空文字を代入することでテキストを削除することができます。</p>
    <p>テキストを削除することは、テキストを空文字に変更すると言うことですね。</p>

    <h2>Text-DOM-操作🔥</h2>
    <h3 class="robotama">ただのロボ玉🔥</h3>

    <h3 class="robotama-type">ロボ玉</h3>

    <h3 class="gunma">神聖グンマー帝国</h3>
    <button type="button" onclick="Gunma()">万歳🔥</button>

    <h3 class="saitama">飛んで埼玉！</h3>
    <button id="flyaway-saitama" type="button" onclick="FlyAwaySaitama()">これを押しては、いけません・・・</button>

    <button id="alive-saitama" type="button" onclick="AliveSaitama()" hidden>復活の埼玉🔥</button>

    <script>

        const robotama = document.querySelector('.robotama');
        
        // 1. テキストの取得 => element.textContent;
        const roboText = robotama.textContent;
        console.log({roboText});
            // 


        const robotamaType = document.querySelector('.robotama-type');
        
        robotamaType.textContent += '試作1号機🔥'

        console.log({robotamaType: robotamaType.textContent});


        let banzaiFlag = false;

        function Gunma (){
            if (!banzaiFlag) {
                const gunma = document.querySelector('.gunma');
                gunma.textContent += '、万歳🔥';
                banzaiFlag = true;
            } else {
                const gunma = document.querySelector('.gunma');
                gunma.textContent = '神聖グンマー帝国';
                banzaiFlag = false;
            }
        }

        const saitama = document.querySelector('.saitama');
        const flyawayButton = document.querySelector('#flyaway-saitama');
        const aliveButton = document.querySelector('#alive-saitama');

        function FlyAwaySaitama (){    
            saitama.textContent = '';

            flyawayButton.hidden = true;
            aliveButton.hidden = false;
        }

        function AliveSaitama (){
            saitama.textContent = '飛んで埼玉🔥';

            flyawayButton.hidden = false;
            aliveButton.hidden = true;
        }

    </script>
</body>
</html>