DOM 介紹

October 24, 2023

Programming   Interview

DOM 是 Document Object Model 的縮寫，用於將 HTML 等語法的標籤描述成物件，這些物件最終會形成樹狀結構。

DOM 介紹

  • DOM 可以分成四個部分：
    1. Document: 整份 HTML 文件。
    2. Element: HTML 元素，例如按鈕 <button id="test">測試</button>。
    3. Text: 一般文字，例如按鈕上顯示的文字<button id="test">**測試**</button>。
    4. Attribute: 屬性，例如按鈕的啟用屬性 <button id="test" **disabled**>測試</button>。
  • 可以使用 JavaScript 等語法存取 DOM ，但 DOM 並不是 JavaScript 的一部分。
  • 事件可以加入至 DOM 的元素內，如 HTML: 
    <button onclick="myFunction()">Click me</button>

    或 JavaScript

     button.addEventListener("click", myFunction);

    。

DOM 的常用 API

  • getElementById(): 根據元素的 ID 取得元素。
  • getElementsByClassName(): 根據元素的 Class Name 取得元素集合 (HTMLCollection)。

(實務上，由於用 jQuery 操作 DOM 更加便利，可以捨棄許多的 DOM API 寫法。)

參考資料