JavaScript Learning「DOMとは何か？」

今、業務プログラミングを初めてする時に必要な知識は、HTMLとCSSとJS（JavaScript）です。HTMLはページ構造、CSSはレイアウト、JSは動きなどです。

HTMLとCSSは絵的なので、比較的に簡単に覚えられますが、JSは動作という見えづらいシステムなので、多少難しくて覚えられない人が多かったです。

これが実務で必要になる基礎知識

しかしJSこそ今の多くのフロントエンドを支える主な技術です。その中でDOMの知識は実務で必要とされます。DOMを使うと、ページを再読み込みせずに画面の内容をリアルタイムで変えられます。

DOMを理解すると「ページ＝固定HTML」という考えから脱却できます。

かつてはDOMを直接意識しない簡単なスクリプトが多かったですが、現在はフレームワークを含めDOM操作の理解が重要になっています。

DOMとは何か？

DOMとは何か？

DOM（Document Object Model）は、HTMLをブラウザがツリー構造として解釈し、 JS(JavaScript)から操作できるようにした仕組みです。

HTMLは静的な構造、DOMは「操作可能な構造」


Preview（実際の動き）

Explanation（コード要約）

HTML / JavaScript 
  <button id="addBtn">要素を追加</button>
  <button id="removeBtn">要素を削除</button>

  <div id="list"></div>

<script>
  const list = document.getElementById("list");
  const addBtn = document.getElementById("addBtn");
  const removeBtn = document.getElementById("removeBtn");

  let count = 0;

  addBtn.addEventListener("click", () => {
    count++;

    const div = document.createElement("div");
    div.className = "item";
    div.textContent = "DOM要素 " + count + "（追加）";

    list.appendChild(div);
  });

  removeBtn.addEventListener("click", () => {
    if (list.lastChild) {
      list.removeChild(list.lastChild);
    }
  });
</script>
  • ボタンを押す → JSがDOMを操作
  • 追加 → createElement + appendChild
  • 削除 → lastChild + removeChild

DOMとは「画面の構造そのもの」であり、JSはそれを直接書き換えている

JP-EN