JavaScript是創建動態網頁效果的關鍵，其中修改文檔對象模型（DOM）是實現網頁交互的基礎。無論是向已存在的文檔對象模型添加新元素，還是更改現有文檔元素的樣式和內容，JavaScript對DOM的修改都能讓網頁變得更加生動有趣。

要使用JavaScript修改DOM，我們需要先選擇需要修改的元素。可以通過標簽名稱、ID、類名或選擇器來選擇DOM元素。下面是幾個例子：

// 選擇根元素
var root = document.documentElement;
// 通過ID選擇元素
var elementById = document.getElementById("myElement");
// 通過類名選擇元素
var elementsByClass = document.getElementsByClassName("myClass");
// 通過標簽名稱選擇元素
var elementsByTag = document.getElementsByTagName("div");
// 通過選擇器選擇元素
var elementBySelector = document.querySelector("#myElement.myClass");
var elementsBySelectorAll = document.querySelectorAll(".myClass");

一旦我們選擇了DOM元素，就可以開始對它們進行修改。下面是一些常見的DOM修改操作：

// 修改元素的內容
element.innerText = "新內容";
element.innerHTML = "<i>新內容</i>";
// 修改元素的樣式
element.style.fontSize = "24px";
element.style.backgroundColor = "yellow";
// 添加、刪除、替換元素
var newElement = document.createElement("div");
element.appendChild(newElement);
element.removeChild(newElement);
element.replaceChild(newElement, oldElement);

上面的代碼演示了如何修改元素的內容、樣式以及添加、刪除、替換DOM元素。雖然這只是一些基本的操作，但是通過組合使用，可以實現很多有趣的動畫和交互效果。

除此之外，還有一些高級的DOM修改技巧。通過使用DOM事件處理程序，我們可以在響應用戶交互時動態修改DOM。另外，使用jQuery等庫也能簡化DOM修改的過程。

總之，JavaScript修改DOM是網頁動態交互的必不可少的一環。通過選擇、修改、添加、刪除和替換元素，我們可以實現更加豐富生動的網頁效果，讓用戶體驗到更好的交互體驗。