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

DOM

HTML 要素を JavaScript で取得する​

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

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

index.html
<div id="greeting">Hello World</div>
script.js
const element = document.getElementById("greeting");
element.textContent = "Hello DOM";
GitHub で表示このプログラムを実行する

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

DOM

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

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

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 のプロパティ名はキャメルケースとして指定する必要があることに注意してください。

課題​

CSS の節の課題を、style 属性を使用せずに JavaScript のみで実現してみましょう。

解答例: JSを用いたCSSスタイリング
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="foo">Foo</div>
    <script src="./script.js"></script>
  </body>
</html>
const element = document.getElementById("foo");
element.style.border = "1px solid #aaa";
element.style.borderRadius = "10px";
element.style.margin = "30px";
element.style.padding = "30px";
element.style.boxShadow = "0px 0px 2px 1px #aaa";
GitHub で表示このプログラムを実行する