首頁 > 文章 > web前端 > 了解文件物件模型 (DOM)

了解文件物件模型 (DOM)

Susan Sarandon原創: 2024-10-13 06:18:02805瀏覽

Understanding the Document Object Model (DOM)

文件物件模型 (DOM) 對於 Web 開發人員來說是一個至關重要的概念，因為它定義了文件的結構並允許與 HTML 和 XML 文件進行動態互動。本指南將幫助您了解 DOM、其結構以及如何使用 JavaScript 來操作它。

什麼是 DOM？

定義：DOM 是 Web 文件的程式設計介面。它將文件表示為物件樹，允許腳本在查看文件時更新文件的內容、結構和樣式。
樹結構：DOM 將文件表示為節點樹。每個節點代表文件的一部分，例如元素、屬性或文字。

DOM結構

屬性節點：表示元素的屬性（例如，class、id）。

註解節點：代表HTML中的註解。

範例 DOM 樹

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

DOM 表示:

Document
├── html (Element)
│   ├── head (Element)
│   │   └── title (Element)
│   │       └── "My Page" (Text)
│   └── body (Element)
│       ├── h1 (Element)
│       │   └── "Hello, World!" (Text)
│       └── p (Element)
│           └── "This is a paragraph." (Text)

訪問 DOM

選擇元素

getElementById：透過 ID 選擇單一元素。

  const element = document.getElementById('myId');

getElementsByClassName：傳回具有指定類別名稱的元素的即時 HTMLCollection。

  const elements = document.getElementsByClassName('myClass');

getElementsByTagName：傳回具有指定標籤名稱的元素的即時 HTMLCollection。

  const elements = document.getElementsByTagName('div');

querySelector：選擇與 CSS 選擇器相符的第一個元素。

  const element = document.querySelector('.myClass');

querySelectorAll：傳回與 CSS 選擇器相符的所有元素的靜態 NodeList。

  const elements = document.querySelectorAll('div.myClass');

操縱元素

更改內容：

  const element = document.getElementById('myId');
  element.textContent = 'New Content';

更改屬性：

  const element = document.getElementById('myId');
  element.setAttribute('class', 'newClass');

改變風格：

  const element = document.getElementById('myId');
  element.style.color = 'blue';

建立與附加元素：

  const newElement = document.createElement('div');
  newElement.textContent = 'I am a new div';
  document.body.appendChild(newElement);

刪除元素：

  const element = document.getElementById('myId');
  element.parentNode.removeChild(element);

DOM 事件

事件是瀏覽器中發生的操作或事件，您可以使用事件處理程序來回應它們。

新增事件監聽器

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

常見事件

click：點擊元素時觸發。
mouseover：當滑鼠懸停在元素上時觸發。
keydown：按下某個鍵時觸發。
submit：提交表單時觸發。

結論

理解 DOM 對於 Web 開發至關重要，因為它提供了一種與網頁互動和操作網頁的方法。掌握 DOM 操作將使您能夠建立動態和互動式 Web 應用程式。

隨意深入研究文件並嘗試 DOM API 中可用的各種方法和屬性。快樂編碼！

以上是了解文件物件模型 (DOM)的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html Static Object for while xml using class Interface Attribute Event dom this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JSON.parse 但沒有錯誤下一篇：JSON.parse 但沒有錯誤

看更多