Index

要素(DOM)の操作について

Javascriptの動的にWebサイトを操作できるという特徴を支えているのが『DOM（document Object Model）』です。

DOMの確認方法について

DOMは『デベロッパーツール』の『Elements(エレメンツ)』より確認することができます。

例えば下記のHTMLをブラウザで表示した場合このように確認します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>DOMの確認</title>
  </head>
  <body>
    <h1 id="title">DOMの確認</h1>
    <div id="wrapper">
      <p id="element1">要素1</p>
    </div>
    <script>
      // p要素を作成
      const el = document.createElement("p");
      // p要素に追加するよう内容を設定する
      const text = document.createTextNode("要素２");
      // divタグの要素を取得
      const wrapper = document.getElementById("wrapper");
      // divタグ内にテキストを含んだ、pタグを追加
      wrapper.appendChild(el).appendChild(text);
    </script>
  </body>
</html>

一見HTMLが表示されているだけのようですが、ElementsにはHTMLをDOMに変換したものが表示されています。

つまりHTMLが変換されたDOM情報をJavascriptより、取得したり編集したりすることで動的にWebサイトを操作していきます。