瀏覽器提供了一個稱為文檔物件模型 (DOM) 的程式設計接口，它允許腳本（特別是 JavaScript）與網頁佈局進行交互。網頁的文檔物件模型 (DOM) 是一種分層樹狀結構，將頁面的元件排列成對象，由瀏覽器在載入時建立。借助此範例，文件的樣式、組織和內容都可以動態存取和變更。
JavaScript 可以對文件物件模型（DOM）進行許多操作，包括：
您可以使用 JavaScript 來變更元素的內容，方法是使用 document.getElementById() 函數定位元素，然後變更元素的 innerHTML 屬性：
// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";
文檔物件位於 DOM 的基礎上，它被組織為物件樹。每個 HTML 元素都表示為樹中的一個節點，這些節點能夠具有相關的事件、方法和屬性。透過提供導航和使用這些節點的方法，DOM 使腳本能夠即時更改頁面。
以下是典型 HTML 文件的 DOM 樹的基本範例：
document ├── html │ ├── head │ │ └── title │ └── body │ ├── h1 │ └── p
出於多種原因，DOM 對於 Web 開發至關重要。
萬維網聯盟 (W3C) 維護 DOM 標準，保證其在各種 Web 瀏覽器和系統中的可靠性和一致性。標準分為各個部分和級別，包括：
每個 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來存取
使用 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');
修改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';
將 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);
});
使用parentNode、children 和siblings 屬性在DOM 樹中導覽。
說明： DOM 遍歷可讓您在文件結構中移動，根據相關元素在 DOM 樹中的位置存取相關元素。
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;
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中文網其他相關文章！
