DOM について

ブラウザの内部構造

HTMLは、そのままレンダリングされるのではなく、DOM に変換されてレンダリングされる。
JavaScript は、HTML を直接変更するのではなく、DOM を変更して表示を更新する。

 DOM とは？Document Object Model の略で、

HTML の情報をプログラムから扱いやすい形にして、メモリに保存したもの。
また、DOM はそれぞれのタグの関係性を表すためにツリー構造になっている。
例えば以下のような HTML があるとする。
<html lang="ja">
  <head>
    <title>DOMSample</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>paragraph</p>
  </body>
</html>
DOM にすると以下のようになる（イメージ）。

ポイントは、
HTML の階層に合わせて要素がツリー構造になっている
それぞれのかたまりはノードという
ツリーのルートは Document オブジェクトである

Shion

どのように JavaScript から操作するのか

DOM ツリーのルートである Document オブジェクトは、JavaScript の document オブジェクトに含まれる。
そのため、document オブジェクトから DOM を操作できる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <p>HOGE</p>
  </body>
  <script>
    "use strict";
    // HOGE を FOO に書き換える
    document.querySelector("p").textContent = "FOO";
  </script>
</html>

Shion

 Interface の継承例えば、Input 要素は以下のように継承されている。

ポイントは、HTMLInputElement は、HTMLElement ~ EventTarget がもつプロパティを全て含んでいるという点。
これは MDN でも確認できる。

https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement
ちなみにこの継承関係は、JavaScript ではプロトタイプチェーンで表している。

このスクラップは2024/12/27にクローズされました