JavaScript

【JavaScript講座】DOM（ドム）とは

DOM（ドム）とは

前回は、例外処理について紹介しました。

例外処理

【JavaScript講座】例外処理

2019年9月13日

今回は、DOM（ドム）について紹介します。

ブラウザ内の文書を操作できる仕組みです。

それでは、見ていきましょう。



DOM とは

DOM は、Document Object Model の略です。

つまり、JavaScript から HTML や XML を操作するための仕組みのことです。

例えば、ブラウザに表示される色を変更したいような場合、DOM という仕組みを使えば、操作することができる。

階層構造

DOM は、階層構造を持っています。

<body>
  ┗<section>
      ┗<h1>
      ┗<p>

上の例でいうと、body要素を頂点として、その下に section要素があり、更にその下に h1要素や p要素がある。

ノード

DOM では、ノードという言葉を使う。

先程の階層構造でいうと、section要素を基準ノードとしたとき、body要素が親ノード、h1要素や p要素が子ノードという。

JavaScript から DOM を操作してみる

それでは、試しに JavaScript から DOM を操作してみます。

document.body.textContent = 'Hello World!';

結果は以下の通りになります。

DOM

こんな感じで Webページとプログラミング言語を繋ぐような役割を DOM が担っているわけです。

要素を取得してみる

今度は、もう少し範囲を限定してみます。

まず、HTML のサンプルコードです。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript サンプル</title>
</head>
<body>
<p>段落</p>
<div id="element"></div>
<script src="js/sample.js"></script>
</body>
</html>

続いて、sample.js ファイルは以下のようになります。

document.getElementById('element').textContent = 'JavaScript で命令したテキスト';

結果は以下の通りです。

DOM

ちゃんと段落の下の指定したところにテキストが表示されていることがわかります。

今回は、id属性を指定しましたが、他にもクラス属性を指定したりすることもできます。

最後に

いかがでしょうか。

次回は要素の指定方法について、もう少し詳しく見ていきたいと思います。



シェア！

RECOMMENDこちらの記事も人気です。