JavaScript 中的 DOM 元素

在 JavaScript 中， DOM（文檔對象模型）是提供訪問和操作 HTML 和 XML 文檔的標準 API。其中， DOM 元素是頁面中的重要組成部分，可用于進行修改、刪除、添加以及獲取元素的信息等操作。

獲取 DOM 元素

要操作 DOM 元素，首先需要獲取元素本身?？梢允褂?JavaScript 中的 document 對象的各種方法獲取 DOM 元素，常見的如下：

// 通過 ID 獲取元素
var elementById = document.getElementById("myId");
// 通過 class 名稱獲取元素
var elementsByClassName = document.getElementsByClassName("myClassName");
// 通過標簽名獲取元素
var elementsByTagName = document.getElementsByTagName("div");
// 通過選擇器獲取元素
var elementsBySelector = document.querySelector("#myId.myClassName");

例如，要獲取一個元素并修改其文本內容：

var elementById = document.getElementById("myId");
elementById.innerHTML = "新的文本內容";

操作 DOM 元素

獲取到 DOM 元素之后，可以使用 JavaScript 中的各種方法對其進行操作，比如修改樣式、添加子元素、刪除子元素等。

例如，要修改元素的背景顏色和字體顏色：

var elementById = document.getElementById("myId");
elementById.style.backgroundColor = "#f00";
elementById.style.color = "#fff";

要添加子元素：

var elementById = document.getElementById("myId");
var newChild = document.createElement("span");
newChild.innerHTML = "新的子元素";
elementById.appendChild(newChild);

要刪除子元素：

var elementById = document.getElementById("myId");
var childToDelete = elementById.children[0];
elementById.removeChild(childToDelete);

DOM 事件

DOM 元素不僅可以進行操作，還可以觸發或響應事件。例如，當用戶點擊按鈕時會觸發 click 事件。

可以使用 JavaScript 中的 addEventListener 方法來監聽 DOM 元素的事件并執行相應的操作。例如，監聽頁面加載完成事件并修改元素文本內容：

document.addEventListener("DOMContentLoaded", function () {
var elementById = document.getElementById("myId");
elementById.innerHTML = "頁面已經加載完成";
});

可以監聽的事件有很多，例如 click、mouseover、keydown 等。當然，也可以通過 removeEventListener 方法來取消事件監聽。

總結

DOM 元素在 JavaScript 中是非常重要的，可以用于獲取、操作和監聽元素的屬性和事件。通過學習 DOM 元素的基本操作和事件，可以更好地控制網頁的動態效果，為頁面增加更多的交互性。