DOM
JavaScript から HTML 要素を操作する
HTML の要素を JavaScript で直接操作することができます。
このように HTML 要素を JavaScript などのプログラムから操作するための仕組みを DOM (Document Object Model) と呼びます。
準備として、下のような HTML を用意しましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>タイトル</title>
</head>
<body>
<p id="greeting">こんにちは、世界！</p>
</body>
</html>
この HTML を保存してみると、こんにちは、世界！ という文字が表示されます。
ここまでは今まで扱ってきた内容と同じです。
では、この ウェブサイトの HTML 要素を JavaScript を使って操作してみましょう。 下記の JavaScript のプログラムを書いて実行してください。
document.getElementById("greeting").textContent = "こんばんは、世界！";
すると、HTML のプログラムを書き換えていないのにもかかわらず、テキストが こんばんは、世界！ に変わりました。
上記のプログラムの各部分について説明します。
document.getElementById("greeting")の部分で、id属性がgreetingである要素を取得しています。.textContentと書くことで要素の中身のテキストにアクセスでき、テキストの取得や変更が行えます。ここではこんにちは、世界！という文字列に変更しています。
JavaScript でスタイルを操作する
CSS の章で扱った「色」や「文字サイズ」などのスタイルも JavaScript から操作することが できます。
下記のプログラムを実行してみましょう。
document.getElementById("greeting").style.backgroundColor = "red";
すると、背景色が赤色に変わりました。
-
document.getElementById("greeting")でid属性がgreetingの要素を取得します。 -
.style.backgroundColorと書くことで要素の背景色にアクセスでき、背景色の取得や変更が行えます。ここでは"red"(赤色) に変更しています。
この backgroundColor というフレーズに聞き覚えがないでしょうか。
そうです、CSS の章で背景色を変更する際に、background-color というプロパティを使いましたね。
これらはよく似ていますが、少し違う部分があります。
JavaScript では、ハイフン (-) で繋ぐ代わりに、2単語目以降の単語の先頭の文字を大文字にして backgroundColor として表す必要があるのです。
このように、CSS のプロパティに対応した書き方で、スタイルを JavaScript から操作することができま す。
| スタイル | CSS | JavaScript |
|---|---|---|
| 背景色 | background-color | backgroundColor |
| 文字サイズ | font-size | fontSize |
| 文字色 | color | color |
| …… | …… | …… |
同じ要領で他のスタイルも操作してみましょう。 例えば下の例では、文字サイズを変更しています。
document.getElementById("greeting").style.fontSize = "100px";
document.getElementById("greeting") の部分を変数に入れて扱うこともできます。こうすると同じ要素に対する操作を簡潔に書くことができますね。
let greetingElement = document.getElementById("greeting");
greetingElement.textContent = "こんばんは、世界！";
greetingElement.style.backgroundColor = "red";
課題
下のような HTML で作成された買い物リストがあります。
<ul>
<li id="item1">リンゴ</li>
<li id="item2">ミカン</li>
<li id="item3">ブドウ</li>
</ul>
JavaScript を使ってこの買い物リストを書き換えて、「リンゴ」「レモン」「ブドウ」と表示されるようにしてみましょう。
解答例: 買い物リストの書き換え
let item = document.getElementById("item2");
item.textContent = "レモン";