JavaScript DOM（Document Object Model 文檔對象模型）提供了一種訪問和操作 HTML 或 XML 文檔內容的方法。DOM 可以將整個文檔視為一個對象，并可以對其中的元素（節點）進行讀寫、增刪的操作。DOM 的核心是元素節點，包括 HTML 標簽、文本節點、屬性等，這些節點都是 DOM 樹的節點。

JavaScript 的 DOM 操作可以實現網頁交互、樣式修改、響應用戶事件等功能。以下是一些常見的 JavaScript DOM 操作：

// 獲取元素節點
document.getElementById("id");
document.getElementsByTagName("tag");
document.getElementsByClassName("class");
// 創建元素節點
document.createElement("element");
// 修改節點屬性
node.setAttribute("attribute", "value");
node.getAttribute("attribute");
node.removeAttribute("attribute");
// 修改節點文本內容
node.innerText = "text";
node.innerHTML = "text1text2";
// 插入和移除節點
parentNode.appendChild(node);
parentNode.removeChild(node);
parentNode.insertBefore(node, referenceNode);

例如，我們有一個 `div` 元素，需要在其中添加新的 `p` 元素：

<div id="container"></div>

let container = document.getElementById("container");
let p = document.createElement("p");
p.innerText = "new element";
container.appendChild(p);

通過 `document.getElementById` 方法獲取到 `div` 元素節點，通過 `document.createElement` 方法創建一個新的 `p` 元素節點，然后將其添加到 `div` 元素節點中。此時，在 HTML 頁面中，會出現以下內容：

<div id="container">
<p>new element</p>
</div>

在實際開發中，DOM 操作經常與事件處理一起使用。例如，我們希望用戶在單擊一個按鈕時，可以動態添加一個 `div` 元素并改變其樣式：

<button id="btn">點擊添加元素</button>

let btn = document.getElementById("btn");
btn.addEventListener("click", function () {
let div = document.createElement("div");
div.innerText = "new element";
div.style.backgroundColor = "blue";
div.style.color = "white";
document.body.appendChild(div);
});

通過 `addEventListener` 方法添加一個單擊事件監聽器，當用戶單擊按鈕時會執行該回調函數。在函數中創建一個新的 `div` 元素節點并添加樣式，最后將其添加到 `body` 元素中。此時，在頁面上會多出一個藍色背景、白色文字的 `div` 元素。

JavaScript DOM 操作具有很強的靈活性，可以讓我們實現各種各樣的交互效果。但是，頻繁的 DOM 操作會導致頁面重繪，影響頁面的性能。因此，在編寫代碼時應該適當減少 DOM 操作，盡量減輕頁面的負擔。