JavaScriptでHTML要素を操作する方法｜要素取得と内容変更を初心者向けに解説【第10講】

JavaScriptでHTML要素を取得・変更する方法

前回の第9講ではDOMの仕組みについて学習しました。

HTMLはツリー構造になっており、JavaScriptから操作できることを学びました。

今回は実際にDOMを操作してみましょう。

この講義ではHTML要素を取得し、文字やHTMLの内容を書き換える方法を学習します。

DOM操作の基本的な流れ

DOM操作は次の3ステップで行います。

1. HTML要素を取得する
2. 取得した要素を変更する
3. ブラウザへ反映する

まずは要素を取得しなければ変更できません。

そのためDOM操作では最初に「どの要素を操作するのか」を指定します。

documentとは？

DOM操作ではdocumentというオブジェクトが頻繁に登場します。

documentは現在表示されているHTML全体を表します。

document
 └ html
    └ body
       ├ h1
       ├ p
       └ button

JavaScriptはdocumentを入口としてHTML要素へアクセスします。

今後のDOM操作では必ず利用するため覚えておきましょう。

getElementById()で要素を取得する

最も基本的な取得方法がgetElementById()です。

次のHTMLを用意します。

<h1 id="title">こんにちは</h1>

JavaScriptで取得します。

const title =
document.getElementById("title");

これでid属性がtitleの要素を取得できます。

構文

document.getElementById("id名");

括弧の中には取得したいid名を指定します。

querySelector()で要素を取得する

実務で最も利用される取得方法がquerySelector()です。

querySelector()はidだけでなくclassやタグ名でも要素を取得できます。

id指定

document.querySelector("#title");

class指定

document.querySelector(".message");

タグ指定

document.querySelector("h1");

柔軟に要素を取得できるため、実務ではquerySelector()を使う機会が多くなります。

textContentで文字を書き換える

取得した要素の文字を変更するにはtextContentを使用します。

次のHTMLを用意します。

<p id="message">こんにちは</p>

JavaScriptで変更します。

const message =
document.getElementById("message");

message.textContent =
"こんばんは";

実行結果は次のようになります。

<p id="message">こんばんは</p>

このようにtextContentは要素内の文字列を変更できます。

よくある利用例

• エラーメッセージ表示
• ログインユーザー名表示
• 検索件数表示
• 通知メッセージ表示

DOM操作の中でも特に利用頻度の高い機能です。

innerHTMLでHTMLを書き換える

HTMLタグごと変更したい場合はinnerHTMLを利用します。

<div id="box"></div>

JavaScriptを実行します。

document.getElementById("box").innerHTML =
"<h2>見出し</h2>";

結果は次のようになります。

<div id="box">
  <h2>見出し</h2>
</div>

innerHTMLはHTMLタグを含めて挿入できます。

textContentとinnerHTMLの違い

textContentの場合

element.textContent =
"<strong>重要</strong>";

結果

重要

タグも文字として表示されます。

innerHTMLの場合

element.innerHTML =
"<strong>重要</strong>";

結果

重要

タグとして解釈されます。

演習問題

問題1

次のHTMLの文字を「JavaScript入門」に変更してください。

<h1 id="title">
JavaScript講座
</h1>

const title =
document.getElementById("title");

title.textContent =
"JavaScript入門";

問題2

次の要素へ見出しタグを追加してください。

<div id="box"></div>

document.getElementById("box").innerHTML =
"<h2>見出し</h2>";

よくある間違い

ID名のスペルミス

document.getElementById("titile");

存在しないidを指定すると取得できません。

要素取得前に変更する

title.textContent =
"変更";

先に要素を取得する必要があります。

まとめ

• documentはHTML全体を表す
• getElementById()でid指定できる
• querySelector()は柔軟に取得できる
• textContentは文字を変更する
• innerHTMLはHTMLを変更する