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

請點(diǎn)擊下面的按鈕：

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

這是一個段落

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