メインコンテンツまでスキップ

DOM

HTML要素をJavaScriptで取得する​

DOM (Document Object Model) は、HTML構造を JavaScriptのオブジェクトとして扱うための枠組みです。 HTMLとCSSのほとんどの機能はJavaScriptから制御することができます。

document.getElementById 関数は、引数としてHTML要素の id 属性に指定された値を文字列として渡すことで、その要素を表すオブジェクトを返します。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="greeting">Hello World</div>
    <script src="./script.js"></script>
  </body>
</html>
script.js
const greetingElement = document.getElementById("greeting");
greetingElement.textContent = "Hello DOM";
GitHub で表示このプログラムを実行する

変数 greetingElement には、index.html に記述された div 要素に対応するオブジェクトが代入されています。

DOM

document.getElementById が返すオブジェクトには、取得したHTML要素の特徴を表す、たくさんのプロパティが含まれています。下はその一部分です。

プロパティ説明
textContent要素内部のテキスト
innerHTML要素内部の HTML
tagNameタグの名前
style要素に設定されたスタイル

textContent プロパティは、HTML要素の内部のテキストを表します。オブジェクトのプロパティは通常の変数のように取得や代入が可能で、上の例では textContent プロパティに対して "Hello DOM" という文字列を代入することで、div 要素の内部のテキストを変更しています。

確認問題​

下のようなHTMLが記述されています。

index.html
<div>Good <strong id="greeting-type">morning</strong>!</div>

JavaScriptを使って、morning を evening にしてください。

解答例
script.js
const greetingType = document.getElementById("greeting-type");
greetingType.textContent = "evening";
GitHub で表示このプログラムを実行する

HTML要素のスタイルを変更する​

document.getElementById 関数が返すオブジェクトの style プロパティは、その要素の style 属性と対応します。 style プロパティに格納されている値自体もオブジェクト となっており、その各プロパティがCSSのプロパティに対応します。

script.js
element.style.backgroundColor = "red";

このプログラムは、取得した要素の背景色を赤色に変更します。

JavaScriptからスタイルを操作する

CSSのプロパティ名である background-color は、内部にハイフンが含まれているため、element.style.background-color のように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。 style プロパティでは、CSSのプロパティ名はキャメルケースとして指定する必要があることに注意してください。

確認問題​

下のようなHTMLファイルがあります。

index.html
<div id="greeting">Hello World!</div>

文字色が黄色、背景色が黒色で Hello World! と表示されるようにしてください。

ここではCSSファイルを作成するのではなく、JavaScriptを使ってスタイルを操作してください。

文字色が黄色、背景色が黒色のHello World!

解答例
script.js
const greetingElement = document.getElementById("greeting");
greetingElement.style.color = "yellow";
greetingElement.style.backgroundColor = "black";
GitHub で表示このプログラムを実行する

DOMを用いて要素を追加する​

document.createElement 関数は、引数に要素の種類を表す文字列を取り、その種類の新しいHTML要素を作る関数です。 document.createElement 関数の戻り値は、新しく作ったHTML要素に対応するオブジェクトです。 下の例では、新しい li 要素を作っています。

中身のない空の要素が作成されるので、textContent を おやつ に設定してみましょう。

script.js
const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";

そして、要素1.appendChild(要素2) とすることで、要素1の子要素に要素2を追加し、画面に表示することができます。 今回は、遠足の持ち物リストに新しい項目を追加してみましょう。

index.html
<ul id="packing-list">
  <li>お弁当</li>
  <li>水筒</li>
</ul>
script.js
const packingList = document.getElementById("packing-list");

const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";

packingList.appendChild(snackElement);

これで、既存の ul 要素の子要素に新しい li 要素が追加され、「おやつ」が加わった持ち物リストが表示されます。

確認問題​

上の遠足の持ち物リストに、さらに「帽子」を追加しましょう。

解答例
script.js
const packingList = document.getElementById("packing-list");

const snackElement = document.createElement("li");
snackElement.textContent = "おやつ";

packingList.appendChild(snackElement);

const capElement = document.createElement("li");
capElement.textContent = "帽子";

packingList.appendChild(capElement);
GitHub で表示このプログラムを実行する

初級演習​

買い物リストの書き換え​

次のHTMLファイルから読み込んでいるJavaScriptファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。

index.html
<ul>
  <li id="item1">トマト</li>
  <li id="item2">ナス</li>
  <li id="item3">バジル</li>
</ul>
解答例: 買い物リストの書き換え
script.js
const targetItem = document.getElementById("item2");

targetItem.textContent = "レモン";
GitHub で表示このプログラムを実行する

中級演習​

フルーツバスケット​

購入する予定の果物を表す文字列が格納された配列が次のように用意されています。

const fruits = ["イチゴ", "スイカ", "バナナ"];

createElement 関数や appendChild 関数を用い、ul 要素の中に各果物に対応する li 要素を作成することで、箇条書きを完成させましょう。 ただし、HTMLファイルには次のように記述されているものとします。

index.html
<ul id="fruit-basket"></ul>
解答例: フルーツバスケット
script.js
const basket = document.getElementById("fruit-basket");
const fruits = ["イチゴ", "スイカ", "バナナ"];

for (const fruit of fruits) {
  const item = document.createElement("li");
  item.textContent = fruit;
  basket.appendChild(item);
}
GitHub で表示このプログラムを実行する