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で出現した順番に並べられています。この事実を利用して構いません。

Edit this page