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

DOM

DOM（Document Object Model）は、HTML 構造を JavaScript のオブジェクトとして扱うための枠組みです。HTML と CSS のすべての機能は、JavaScript 側から操作することが可能になっています。

DOM 要素を取得する​

HTML 要素を DOM オブジェクトとして取得するもっとも単純な方法は、document.getElementByIdを使用する方法です。

HTML
<div id="element">Hello World</div>
JavaScript
const element = document.getElementById("element");
element.textContent = "Hello DOM";

document.getElementByIdを使用すると、HTML 中に存在する特定の ID を持つ要素を取得することができます。このオブジェクトはtextContentプロパティを持ち、HTML タグの内部のテキストに対応します。

DOM 要素のスタイルシートを変更する​

DOM オブジェクトのstyleプロパティは、すべての CSS の値を含むオブジェクトです。オブジェクトのキーが、CSS のプロパティ名をキャメルケースに変換したものに対応します。

element.style.backgroundColor = "red";

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

CSS セレクタを使用して要素を取得する​

document.querySelectorを使用すると、CSS セレクタを使用して要素を取得することができます。

const element = document.querySelector("#container div:hover");

また、document.querySelectorAllを用いると、CSS セレクタにマッチするすべての要素を、配列と同じような形式で取得することができます。

const elements = document.querySelectorAll("#container div");
for (const element of elements) {
  element.style.color = "red";
}

以上の例では、CSS セレクタ#container divにマッチするすべての要素の文字色が赤色に変更されます。

課題​

<table>
  <tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th></tr>
  <tr><th>1</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>2</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>3</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>4</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>5</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>6</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>7</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>8</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><th>9</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

JavaScript ですべてのtd要素を取得し、九九の表を完成させましょう。なお、document.querySelectorAllの戻り値は、HTML で出現した順番に並べられています。この事実を利用して構いません。