8.3 要素の内容とスタイルの変更
取得した要素の中身やスタイルを変更する方法を学びます。
8.3.1 textContent と innerHTML
textContent
要素のテキスト内容だけを取得・変更します。HTML タグは文字列として扱われます。
innerHTML
要素の中身を HTML 形式で取得・変更します。HTML タグとして解釈されます。
const div = document.querySelector("#content");
// textContent：タグを文字列として扱う
div.textContent = "<strong>太字</strong>"; // 画面には「<strong>太字</strong>」と表示
// innerHTML：タグとして解釈
div.innerHTML = "<strong>太字</strong>"; // 画面には「太字」と太字で表示
セキュリティ上の注意
ユーザーの入力をそのまま innerHTML に設定すると、XSS（クロスサイトスクリプティング）攻撃のリスクがあります。基本的には textContent を使い、必要な場合のみ innerHTML を使うようにしてください。
8.3.2 classList（add, remove, toggle）
classList は、要素の CSS クラスを追加・削除・切り替えるための便利なプロパティです。
8.3.3 要素の内容とスタイルを変更するプログラム
ソースフォルダ：public/ch08
ファイル名：dom-style.js
➢ dom-style.html
前の項で作った ch08/dom-query.html をコピーし、ch08 にペーストしてください。その際に、ファイル名を dom-style.html に変更します。ファイル内の dom-query.html や dom-query.js の記述も、dom-style.html や dom-style.js に修正します。さらに、ファイル内の記述を以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習: dom-style.jsを実行中</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="text">この文章のスタイルを変更します。</p>
<button id="toggleBtn">ハイライト切り替え</button>
<script src="dom-style.js"></script>
</body>
</html>
➢ dom-style.js
// dom-style.js
// 要素を取得
const text = document.querySelector("#text");
const button = document.querySelector("#toggleBtn");
// ボタンクリックでクラスを切り替え
button.addEventListener("click", function() {
text.classList.toggle("highlight");
// クラスが付いているか確認
if (text.classList.contains("highlight")) {
alert("ハイライトが ON になりました");
} else {
alert("ハイライトが OFF になりました");
}
});
実行結果
ボタンをクリックするたびに、文章が黄色の背景で太字になったり、元に戻ったりします。
実行結果
4 行目と 5 行目で、p タグと button タグの要素を取得しています。
4: const text = document.querySelector("#text");
5: const button = document.querySelector("#toggleBtn");
8 行目から 17 行目で、ボタンがクリックされたときの処理を定義しています。
9 行目の toggle メソッドは、highlight クラスがあれば削除し、なければ追加します。
9: text.classList.toggle("highlight");
12 行目では、contains メソッドを使って、現在 highlight クラスが付いているかどうかを確認し、適切なメッセージを表示しています。
12: if (text.classList.contains("highlight")) {
13: alert("ハイライトが ON になりました");
14: } else {
15: alert("ハイライトが OFF になりました");
16: }