最新！JavaScript入門講座 DOM入門 DOMの書き換えをわかりやすく解説

DOMではサイトにテキストや要素を動的に表示させたりすることができます。Webサイトを構築する上で、DOMで要素の取得や出力は基礎になってきます。

今回は、DOMでテキストを出力する方法を解説していきます。

本記事のペルソナ

JavaScript初学者の方
DOMを学びたい方
DOMでテキストを出力させたい方

DOMの書き換え
1. 要素の中身にアクセスする（innerHTML）
2. 要素の内容（textContent）
まとめ
参考文献

DOMの書き換え

要素の中身にアクセスする（innerHTML）

DOMの内容を書き換えるには、主に2つのやり方があります。そのうちの一つが、「innerHTML」になります。このプロパティは最もよく使われるスタンダードなものです。DOMを書き換えるなら、間違いなく使われています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <h2 id="js-head-2">JavaScript</h2>

        <div id="js-div">クレジットカードは使っていますか？</div>
        <div id="js-ans"></div>
        <div id="js-card"></div>
        <script src="script.js"></script>
    </body>
</html>

let doc = document;
let doc_ans = doc.getElementById("js-ans");
doc_ans.innerHTML = "はい";

let doc_card = doc.getElementById("js-card");
doc_card.innerHTML = "楽天カードを使っています。";

innerHTMLに文字列を代入することでDOMを書き換えたり、テキストを表示させたりすることができます。ただ、innerHTMLはHTMLコードを文字列として扱います。
なので、下のようにHTMLコードを入れると、それが反映されます。

let doc = document;
let doc_ans = doc.getElementById("js-ans");
doc_ans.innerHTML = "はい";

let doc_card = doc.getElementById("js-card");
doc_card.innerHTML = `<div><p>楽天カードとEPOSカードを使っています。</p></div>`;

要素の内容（textContent）

DOMを書き換えるもう一つの方法として、Webページの要素の内容の中からテキストを参照するやり方です。テキストを参照し、新しい値を設定することでDOMを書き換えます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <h2 id="js-head-2">JavaScript</h2>


        <h2>どのQR決済を使っていますか？</h2>
        <div><p id="js-qr"></p></div>
        
        <script src="script.js"></script>
    </body>
</html>

let doc_qr = doc.getElementById("js-qr");
doc_qr.textContent = "d払い・AUPay・楽天Pay・SC・PayPayを使っています。";

文字列を先ほどと同じように代入すると、DOMが書き換わります。
また、先程のinnerHTMLとの違いで、HTML要素を記述してもそれがブラウザに読み取られることがなく、無効化されます。

let doc_qr = doc.getElementById("js-qr");
doc_qr.textContent = `<p>d払い・AUPay・楽天Pay・SC・PayPayを使っています。</p>`;

上のように記述しても、文字列がそのまま出力されます。

まとめ

では、今回のまとめに入ります。
今回は下記のことを学びました。

まとめ

DOMを書き換える方法
innerHTML
textContent

今回はここまでとなります。
お疲れさまでした。

参考文献

Node - Web API | MDN

DOM の Node インターフェイスは、他の多くの DOM API オブジェクトのベースとなる抽象的な基底クラスです。したがって、これらのオブジェクト型と類似しており、しばしば交換して使用することができます。抽象クラスであるため、単なる Node オブジェクトというものは存在しません。 Node の機能を実装している...

Element: innerHTML プロパティ - Web API | MDN

Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

【DOM基礎】要素内容の取得・設定／ノードの作成・挿入・削除 - Qiita

前回の続きです。要素内容の取得・設定innerHTML要素内のHTMLを取得・設定できます。// 取得const html = element.innerHTML;// 設定eleme…

【JavaScript】DOMの基本 - Qiita

##はじめにJavascriptを学ぶ上で欠かせないDOMについて、基礎的な部分を固めたいのでまとめました。学習サイトやなんやらでJavaScriptの文法的な基礎を学んだ後、次は？みたいな人（…