JavaScript DOM操作有哪些實用技巧

JavaScript DOM（文檔對象模型）操作非常豐富，下面是一些實用技巧：

1. 獲取元素：使用 getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector() 和 querySelectorAll() 方法可以獲取 DOM 元素。其中 querySelector() 和 querySelectorAll() 方法非常強大，可以基于 CSS 選擇器獲取元素。
2. 創建元素：使用 createElement()、createTextNode() 方法可以創建新的 DOM 元素和文本節點。
3. 添加元素：使用 appendChild()、insertBefore()、replaceChild() 方法可以將新元素添加到 DOM 中。其中 appendChild() 方法將新元素添加到指定元素的子元素列表的末尾，insertBefore() 方法將新元素插入到指定元素的前面，replaceChild() 方法將指定元素替換為新元素。
4. 刪除元素：使用 removeChild() 方法可以刪除 DOM 元素。
5. 修改元素：使用 innerHTML、innerText、textContent 屬性可以修改元素的 HTML 內容、文本內容和純文本內容。使用 setAttribute() 和 removeAttribute() 方法可以修改元素的屬性。
6. 改變元素樣式：使用 style 屬性可以改變元素的樣式，例如顏色、字體、寬度、高度等。
7. 添加事件監聽器：使用 addEventListener() 方法可以為 DOM 元素添加事件監聽器，以便在事件觸發時執行相應的操作。
8. 操作類名：使用 classList 屬性可以方便地操作元素的類名，例如添加、刪除、切換類名等。
9. 遍歷 DOM：使用 parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling 屬性可以遍歷 DOM 樹，找到指定元素的前一個、后一個、父節點、子節點等。
10. 創建動畫：使用 requestAnimationFrame() 方法可以創建動畫效果，通過不斷修改元素的樣式屬性來實現動畫效果。

以上是一些常用的 JavaScript DOM 操作技巧，掌握這些技巧可以大大提高開發效率和代碼質量。