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

了解 JavaScript 中的文件物件模型 (DOM)

DDD原創: 2024-09-19 01:06:02848瀏覽

Understanding Document Object Model (DOM) in JavaScript

你好，神奇的 JavaScript 開發者？

瀏覽器提供了一個稱為文檔物件模型 (DOM) 的程式設計接口，它允許腳本（特別是 JavaScript）與網頁佈局進行交互。網頁的文檔物件模型 (DOM) 是一種分層樹狀結構，將頁面的元件排列成對象，由瀏覽器在載入時建立。借助此範例，文件的樣式、組織和內容都可以動態存取和變更。

使用 DOM 進行交互

JavaScript 可以對文件物件模型（DOM）進行許多操作，包括：

修改 HTML 元素的內容
新增或刪除元素和屬性
回應點擊或按鍵等使用者事件
在頁面內建立新事件

例子

您可以使用 JavaScript 來變更元素的內容，方法是使用 document.getElementById() 函數定位元素，然後變更元素的 innerHTML 屬性：

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

DOM結構

文檔物件位於 DOM 的基礎上，它被組織為物件樹。每個 HTML 元素都表示為樹中的一個節點，這些節點能夠具有相關的事件、方法和屬性。透過提供導航和使用這些節點的方法，DOM 使腳本能夠即時更改頁面。

以下是典型 HTML 文件的 DOM 樹的基本範例：

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p

DOM 在 Web 開發中的作用

出於多種原因，DOM 對於 Web 開發至關重要。

透過讓腳本回應使用者輸入來更改頁面的樣式和內容，可以建立動態和互動式網頁。
它透過為各種瀏覽器提供標準化介面來與線上頁面互動和操作，從而確保跨平台的一致性。
單頁應用程式 (SPA) 依賴 DOM 來刷新頁面而不需要重新加載，因此這對其操作至關重要。

DOM 等級和標準

萬維網聯盟 (W3C) 維護 DOM 標準，保證其在各種 Web 瀏覽器和系統中的可靠性和一致性。標準分為各個部分和級別，包括：

所有文件類型的基礎範例是 * Core DOM:.
XML 文件模型稱為 XML DOM.
HTML DOM： 此模型是專門為 HTML 檔案建立的。

每個 DOM 標準版本都增加了更多功能和功能，支援更複雜的線上文件操作和互動。

DOM 操作的真實世界插圖

以下是如何使用 DOM 與 HTML 文件進行通訊的真實範例：

<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="header">Hello, World!</h1>
<button onclick="changeHeader()">Change Header</button>

<script>
function changeHeader() {
// Use the DOM to access and modify the h1 element
var header = document.getElementById("header");
header.textContent = "DOM Manipulation in Action!";
header.style.color = "blue";
}
</script>
</body>
</html>

在此範例中，按一下按鈕會呼叫changeHeader()函數，該函數使用DOM來存取

;元素的 ID。然後它會更改文字內容和標題的顏色。

基本 DOM 技術

1. 查詢選擇

使用 document.querySelector() 精確地抓取元素。

說明： querySelector() 讓您可以使用 CSS 選擇器選擇元素，使其成為存取 DOM 元素的強大而靈活的方式。

例子

// Select the first element with class 'myClass'

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

// Select a specific element by ID
const header = document.querySelector('#header' );

// Select the first <p> inside a <div>
const paragraph = document.querySelector('div p');

2. 動態內容

修改innerHTML或textContent動態更新頁面內容。

說明：innerHTML 或 textContent 可讓您動態變更元素的內容，從而實現互動式和響應式網頁。

例子

// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = '<strong>New content!</strong>';

// Using textContent (plain text only, safer for user inputs)

document.querySelector('#myParagraph').textContent = 'Updated text content';

3. 事件監聽

將 addEventListener() 附加到元素以實現互動式使用者體驗。

說明： addEventListener() 可讓您回應使用者操作，例如按一下、按鍵或滑鼠移動，從而建立互動式 Web 應用程式。

例子

const button = document.querySelector('#myButton' );

button. addEventListener( 'click', function( ) {
     alert( 'Button clicked!')
});

// Using arrow function
document.addEventListener('keydown', (event) => {
     console. log( 'Key pressed:', event.key);
});

4.DOM遍歷

使用parentNode、children 和siblings 屬性在DOM 樹中導覽。

說明： DOM 遍歷可讓您在文件結構中移動，根據相關元素在 DOM 樹中的位置存取相關元素。

Example

const child = document.querySelector('#childElement');

// Access parent
const parent = child.parentNode;

// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;

Conclusion

The DOM is a powerful tool in JavaScript that enables developers to create rich, interactive web experiences. By understanding and utilizing the DOM, developers can control the behavior and appearance of web pages, making them more engaging and responsive to user interactions.

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

JavaScript css html Object for select xml using Interface Property Event number function dom this innerHTML position input Access

陳述：

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

上一篇：使用 Node.js 和 Django 建立儀表板應用程式下一篇：使用 Node.js 和 Django 建立儀表板應用程式

看更多