你好，神奇的 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 文件進行通訊的真實範例：

Hello, World!
Change Header

在此範例中，按一下按鈕會呼叫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 
 inside a 

const paragraph = document.querySelector('div p');





  
  
  2. 動態內容


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

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


  
  
  例子




// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = 'New content!';

// 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 樹中的位置存取相關元素。 


  
  
  例子




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;





  
  
  結論


DOM 是 JavaScript 中的強大工具，使開發人員能夠創建豐富的互動式 Web 體驗。透過理解和利用 DOM，開發人員可以控制網頁的行為和外觀，使它們更具吸引力並回應使用者互動。