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

DOM

オブジェクト#

JavaScript で扱うことのできるの種類として、これまで数値文字列論理値を扱ってきました。

オブジェクトもまた、JavaScriptですが、今まで扱ってきたとは少し性質が異なります。

HTML 要素を JavaScript で取得する#

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

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

index.html
<div id="greeting">Hello World</div>
script.js
let element = document.getElementById("greeting");element.textContent = "Hello DOM";

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

DOM

オブジェクトは、複数のプロパティと呼ばれるを持ちます。プロパティにはそれぞれ名前がついており、document.getElementById返すオブジェクトプロパティは、それぞれがHTML 要素の特徴を表しています。

note

オブジェクトプロパティは、CSS におけるプロパティと似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。

document.getElementById返すオブジェクトには、たくさんのプロパティが含まれています。下はその一部分です。

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

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

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

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

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

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

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

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