<介紹>JavaScript 是一種廣泛應用于網頁設計的腳本語言，它可以通過操作文檔對象模型（DOM）來實現頁面上的交互效果。其中，DOM 又是什么呢？DOM 是文檔對象模型（The Document Object Model）的縮寫，它是一種展現文檔本身的方式，同時也是一種可以讓程序和腳本對文檔內容進行訪問和操作的方法。本文將著重介紹 JavaScript 事件和 DOM 實例，并通過舉例說明它們在頁面交互效果中的應用。在 JavaScript 中，事件是用戶與頁面交互的最基本的形式之一。事件是一種在特定條件下發生的交互行為，比如用戶點擊、鼠標移動、鍵盤按下等。我們可以通過添加事件處理程序來捕獲和處理這些事件。以下是一個按鈕的點擊事件示例：

請點擊下面的按鈕：

點擊我在上述示例中，我們給按鈕添加了一個點擊事件的處理程序：當用戶單擊按鈕時，頁面會顯示一個提示框，表示“Hello World!”。在 JavaScript 中，事件處理程序有兩種添加方式：第一種是在 HTML 中通過 attribut 屬性的形式添加，第二種是在 JavaScript 中通過事件監聽器（addEventListener）添加。示例如下：在上述示例中，我們通過調用 btn 元素的 addEventListener() 方法添加了一個點擊事件監聽器，當用戶單擊按鈕時，頁面會顯示一個提示框，表示“Hello World!”。其中，false 表示事件冒泡階段中的處理順序。DOM 實例提供了一些方法和屬性，可以用來訪問和操作文檔對象模型中的元素和節點。以下是一些常見的 DOM 實例示例： 1. 獲取元素 在 JavaScript 中，可以通過 document.querySelector() 和 document.querySelectorAll() 方法獲取文檔中的元素。querySelector() 方法返回第一個匹配指定選擇器的元素，而 querySelectorAll() 方法返回所有匹配指定選擇器的元素。示例代碼如下：

這是一個段落

2. 修改元素屬性 可以通過修改元素屬性來改變元素的外觀和行為。JavaScript 中，可以通過元素的屬性名，例如 element.id、element.className、element.src 等等，在 JavaScript 代碼中讀取和修改元素屬性。示例代碼如下：點擊我在上述示例中，當用戶單擊按鈕時，頁面會顯示“你已經點擊了我”，并且按鈕會被禁用。 3. 創建和添加元素 可以使用 createElement() 和 appendChild() 方法創建新元素并將其添加到頁面中。createElement() 方法用于創建新的元素，而 appendChild() 方法用于將新元素添加到現有元素的子元素列表的末尾。示例代碼如下：點擊我在上述示例中，當用戶單擊按鈕時，頁面會顯示“你剛剛點擊了按鈕”，并且該文本內容將以新段落元素的形式添加到頁面中。<總結>本文介紹了 JavaScript 事件和 DOM 實例的基本概念和應用。通過添加事件處理程序和使用 DOM 實例，我們可以很容易地實現頁面上的交互效果。在開發過程中，我們需要根據實際需求選擇適合的事件和 DOM 方法，并合理使用它們來實現我們想要的效果。