【前端】DOM 介紹

by Posted on

DOM（Document Object Model，文件物件模型）是一種用來表示和操作 HTML 或 XML 文件的編程接口。它將結構化的文件（如 HTML 和 XML）表示為一棵樹形結構，並允許程式（通常是 JavaScript）動態地讀取和修改其內容、結構和樣式。

DOM 的基本概念：

  • 樹形結構：DOM 將 HTML 文件中的每個部分（如元素、屬性和文字）視為一個節點，這些節點之間具有父子關係，形成樹形結構。整個文件的根節點是 <html>，其下是 <head> 和 <body> 等子節點。
  • 節點類型：DOM 中的節點可以是多種類型的，例如：
  • 元素節點（Element Node）：HTML 標籤，如 <div>、<p> 等。
  • 屬性節點（Attribute Node）：元素的屬性，如 class 或 id。
  • 文本節點（Text Node）：元素中的文本內容。
  • 操作能力：DOM 提供了編程接口，允許開發者動態地改變文檔的結構、樣式或內容。這些操作包括：
  • 查詢、添加、刪除和修改節點；
  • 改變樣式和屬性；
  • 回應用戶事件（如點擊、輸入等）。

DOM 的常用操作：

  1. 查找元素：
  • document.getElementById('id')：通過元素的 ID 查找節點。
  • document.querySelector('selector')：使用 CSS 選擇器查找節點。
  1. 修改內容：
  • element.innerHTML：修改元素的 HTML 內容。
  • element.textContent：修改元素的純文本內容。
  1. 改變屬性和樣式：
  • element.setAttribute('attribute', 'value')：修改或添加屬性。
  • element.style.property = 'value'：動態改變元素的樣式。
  1. 事件處理：
  • element.addEventListener('click', function)：給元素添加事件監聽器，如點擊事件。

簡單範例：

假設有一個簡單的 HTML 文檔：<!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body> <h1 id="title">Hello, World!</h1> <p>This is a paragraph.</p> </body> </html>

你可以通過 JavaScript 操作 DOM 來改變這個頁面：// 查找標題元素 var title = document.getElementById('title'); // 修改標題文本 title.textContent = 'Hello, DOM!'; // 改變標題樣式 title.style.color = 'blue';

總結：

DOM 是一種接口，允許開發者使用程式來動態操作 HTML 和 XML 文件。它是一種將文檔表示為節點樹的模型，並提供了豐富的 API 來讀取和修改節點的內容、屬性和樣式，從而能夠實現動態、交互式的網頁效果。

本文由 ChatGPT 生成

Post Views: 250

Published by 小書僮