前編では、DOMの概念と、要素を取得する方法を学びました。中編では、取得した要素の内容やスタイルを変更する方法を見ていきましょう。

3. 要素の内容を変更する

要素の内容を変更するには、主に以下の2つのプロパティを使います。

• textContent: 要素のテキスト内容を変更する
• innerHTML: 要素のHTML内容を変更する

textContent

textContentプロパティは、要素のテキスト内容を取得・設定します。タグは無視され、テキストだけが対象となります。

例えば、以下のようなHTMLがあるとします。

<p id="myParagraph">こんにちは、<b>世界</b>！</p>

このp要素のテキスト内容を変更してみましょう。

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

// テキスト内容を取得する
console.log(myParagraph.textContent); // こんにちは、世界！

// テキスト内容を変更する
myParagraph.textContent = "Hello, world!";
console.log(myParagraph.textContent); // Hello, world!

textContentに新しい文字列を代入すると、要素のテキスト内容が書き換わります。<b>タグは無視され、単なるテキストとして扱われることに注意してください。

innerHTML

innerHTMLプロパティは、要素のHTML内容を取得・設定します。タグもHTMLとして解釈されます。

先ほどの例で、innerHTMLを使ってみましょう。

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

// HTML内容を取得する
console.log(myParagraph.innerHTML); // こんにちは、<b>世界</b>！

// HTML内容を変更する
myParagraph.innerHTML = "Hello, <i>world</i>!";
console.log(myParagraph.innerHTML); // Hello, <i>world</i>!

innerHTMLに新しいHTML文字列を代入すると、要素のHTML内容が書き換わります。<i>タグはイタリック体として解釈されます。

innerHTMLの注意点

innerHTMLを使うと、要素の内容をHTMLとして自由に書き換えられますが、注意も必要です。

• セキュリティリスク: ユーザーが入力した内容をそのままinnerHTMLに代入すると、悪意のあるスクリプトが実行される危険性があります（クロスサイトスクリプティング、XSS）。ユーザー入力を扱う場合は、textContentを使う方が安全です。
• パフォーマンス: innerHTMLで要素の内容を書き換えると、ブラウザはHTMLを再度解析する必要があります。そのため、textContentを使うよりも処理が遅くなる可能性があります。

4. 要素のスタイルを変更する

要素のスタイルを変更するには、主に以下の2つの方法があります。

• styleプロパティを使う
• classNameプロパティ、classListプロパティを使う

styleプロパティ

styleプロパティは、要素のインラインスタイルを取得・設定します。インラインスタイルとは、HTMLタグのstyle属性で指定するスタイルのことです。

例えば、以下のようなHTMLがあるとします。

<div id="myDiv">このdivのスタイルを変えてみよう</div>

このdiv要素のスタイルを変更してみましょう。

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

// スタイルを取得する（最初は空）
console.log(myDiv.style);

// スタイルを設定する
myDiv.style.color = "red";
myDiv.style.backgroundColor = "lightblue";
myDiv.style.fontSize = "20px";

styleプロパティはオブジェクトになっており、CSSのプロパティ名に対応するプロパティを持っています。ただし、プロパティ名はキャメルケース（backgroundColorのように、単語の先頭を大文字でつなげる）で表現することに注意してください。

設定したスタイルは、要素のstyle属性に反映されます。

<div id="myDiv" style="color: red; background-color: lightblue; font-size: 20px;">このdivのスタイルを変えてみよう</div>

classNameプロパティ

classNameプロパティは、要素のclass属性を取得・設定します。

例えば、以下のようなHTMLとCSSがあるとします。

<div id="myDiv">このdivのクラスを変えてみよう</div>

.red {
  color: red;
}

.blue {
  color: blue;
}

このdiv要素のクラスを変更してみましょう。

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

// クラスを取得する（最初は空）
console.log(myDiv.className);

// クラスを設定する
myDiv.className = "red";

// クラスを複数設定する
myDiv.className = "red bold";

classNameに新しい文字列を代入すると、要素のclass属性が書き換わります。複数のクラスを設定する場合は、スペースで区切って指定します。

classListプロパティ

classListプロパティは、要素のクラスリストを取得し、操作するためのメソッドを提供します。

• add(クラス名): クラスを追加する
• remove(クラス名): クラスを削除する
• toggle(クラス名): クラスが存在すれば削除し、存在しなければ追加する
• contains(クラス名): クラスが存在するかどうかを真偽値で返す

先ほどの例で、classListを使ってみましょう。

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

// クラスを追加する
myDiv.classList.add("blue");

// クラスを削除する
myDiv.classList.remove("red");

// クラスを切り替える
myDiv.classList.toggle("bold");

// クラスが存在するか確認する
console.log(myDiv.classList.contains("blue")); // true

classListを使うと、より柔軟にクラスを操作できます。