JavaScript DOM教程

DOM，全稱“Document Object Model”，即文檔對象模型。顧名思義，它是將文檔作為對象來處理，也是 JavaScript 操作 HTML 和 XML 文檔的基礎。

DOM 主要分為節點和元素兩個部分，通過這兩部分可以方便地訪問和操作文檔中的內容。

節點

節點可以理解為文檔種的單元，包括元素、屬性、文本，不同的節點類型有不同的應用場景。

// 獲取父節點
const parent = document.getElementById('parent');
// 獲取第一個子節點
const firstChild = parent.firstChild;
// 獲取下一個兄弟節點
const nextSibling = firstChild.nextSibling;

如上代碼所示，我們可以通過 getElementById 方法獲取到指定 ID 的元素，然后通過 firstChild 和 nextSibling 方法獲取其子節點和兄弟節點。

元素

元素是節點的一種，表示 HTML 或者 XML 中的標簽，并且具有相應的屬性和方法。

// 獲取元素
const element = document.getElementById('element');
// 修改元素內容
element.innerHTML = 'Hello World!';
// 修改元素樣式
element.style.color = 'red';

如上代碼所示，我們可以通過 getElementById 方法獲取到指定 ID 的元素，然后通過 innerHTML 方法修改元素內容；通過 style 屬性修改元素樣式。

節點遍歷

我們可以通過循環遍歷來訪問 DOM 樹中的節點，如下所示：

// 獲取父節點
const parent = document.getElementById('parent');
// 遍歷子節點
for(let i = 0; i < parent.childNodes.length; i++) {
const node = parent.childNodes[i];
console.log(node.nodeName);
}

以上代碼中，我們通過遍歷父節點的子節點，并打印每個子節點的 nodeName，來對節點進行遍歷。

事件處理

DOM 中的事件處理也是很重要的，我們可以通過添加相應的事件監聽來處理用戶的操作。

// 獲取元素
const element = document.getElementById('element');
// 添加事件監聽
element.addEventListener('click', (event) =>{
console.log(event.target.innerHTML);
});

如上代碼所示，我們通過 addEventListener 方法為元素添加事件監聽，并在觸發事件的時候，輸出其 innerHTML。

總結

JavaScript DOM 是 Web 開發中不可或缺的一環，我們可以通過訪問這個模型來獲取和修改文檔的內容和結構，并且對事件進行處理。以上是 DOM 的一些基礎用法，還有很多 API 和方法需要掌握，可以通過自己的實踐來深入學習。