了解文件物件模型 (DOM)-js教程-PHP中文網

了解文件物件模型 (DOM)

Susan Sarandon

發布： 2024-10-13 06:18:02

原創

844 人瀏覽過

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中文網其他相關文章！