JavaScript 是一種非常強(qiáng)大的編程語(yǔ)言，它可以用來(lái)修改 HTML 文檔結(jié)構(gòu)。同時(shí)，JavaScript 可以很方便地與 HTML 和 CSS 結(jié)合使用，實(shí)現(xiàn)更加豐富和具有交互性的 Web 頁(yè)面。本文將介紹 JavaScript 如何修改 HTML 文檔結(jié)構(gòu)以及一些實(shí)用案例。

首先，我們需要了解 HTML 文檔結(jié)構(gòu)是如何組織的。一個(gè) HTML 文檔由若干個(gè)元素（Element）組成，元素可以是一個(gè)塊級(jí)元素（如 div、p、h1 等），也可以是一個(gè)行內(nèi)元素（如 span、a、img 等）。元素可以包含其他元素，形成一個(gè)元素樹，也成為文檔對(duì)象模型（Document Object Model，DOM）。在 DOM 中，每個(gè)元素都是一個(gè)對(duì)象，我們可以通過 JavaScript 修改這些對(duì)象的屬性值，來(lái)改變它們的外觀和行為。

以下是幾個(gè)示例，具體代碼在 pre 標(biāo)簽中。

/**
 * 修改元素屬性
 */
// 獲取一個(gè)元素節(jié)點(diǎn)
const divEl = document.querySelector('div');
// 修改元素的 class 屬性
divEl.classList.add('active');
divEl.classList.remove('inactive');
// 修改元素的樣式
divEl.style.backgroundColor = '#999';
/**
 * 創(chuàng)建和刪除元素
 */
// 創(chuàng)建一個(gè)新元素
const newDiv = document.createElement('div');
// 給新元素設(shè)置屬性和內(nèi)容
newDiv.setAttribute('class', 'new');
newDiv.innerHTML = 'I am a new div';
// 將新元素添加到文檔中
document.body.appendChild(newDiv);
// 刪除一個(gè)元素
const oldDiv = document.querySelector('.old');
document.body.removeChild(oldDiv);
/**
 * 修改元素內(nèi)容
 */
// 獲取一個(gè)元素
const pEl = document.querySelector('p');
// 修改元素的文本內(nèi)容
pEl.textContent = '這是新的文本內(nèi)容';
// 修改元素的 HTML 內(nèi)容
pEl.innerHTML = '這是 <b>加粗</b> 的文本內(nèi)容';

以上示例演示了如何通過 JavaScript 修改元素屬性、創(chuàng)建、刪除和修改元素內(nèi)容等操作。通過這些操作，我們可以實(shí)現(xiàn)更加豐富和動(dòng)態(tài)的 Web 頁(yè)面。同時(shí)需要注意，任何的 DOM 操作都會(huì)影響頁(yè)面的性能，如果操作過于復(fù)雜或頻繁，會(huì)導(dǎo)致頁(yè)面的卡頓和加載速度變慢，因此我們需要謹(jǐn)慎使用。

除了以上操作，JavaScript 還可以通過事件綁定和響應(yīng)等方式，實(shí)現(xiàn)動(dòng)態(tài)交互效果。例如，當(dāng)用戶點(diǎn)擊按鈕時(shí)，可以通過 JavaScript 動(dòng)態(tài)添加元素或修改元素樣式等操作，從而實(shí)現(xiàn)更加豐富和生動(dòng)的 Web 頁(yè)面。

總之，通過 JavaScript 可以輕松地修改 HTML 文檔結(jié)構(gòu)，從而實(shí)現(xiàn)更加豐富和交互性的 Web 頁(yè)面。但同時(shí)也需要謹(jǐn)慎使用，避免過于頻繁或復(fù)雜的操作導(dǎo)致性能問題。希望本文對(duì)讀者有所啟發(fā)，能夠更好地運(yùn)用 JavaScript 改善 Web 頁(yè)面。