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

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

以下是幾個示例，具體代碼在 pre 標簽中。

/**
 * 修改元素屬性
 */
// 獲取一個元素節(jié)點
const divEl = document.querySelector('div');
// 修改元素的 class 屬性
divEl.classList.add('active');
divEl.classList.remove('inactive');
// 修改元素的樣式
divEl.style.backgroundColor = '#999';
/**
 * 創(chuàng)建和刪除元素
 */
// 創(chuàng)建一個新元素
const newDiv = document.createElement('div');
// 給新元素設(shè)置屬性和內(nèi)容
newDiv.setAttribute('class', 'new');
newDiv.innerHTML = 'I am a new div';
// 將新元素添加到文檔中
document.body.appendChild(newDiv);
// 刪除一個元素
const oldDiv = document.querySelector('.old');
document.body.removeChild(oldDiv);
/**
 * 修改元素內(nèi)容
 */
// 獲取一個元素
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)容等操作。通過這些操作，我們可以實現(xiàn)更加豐富和動態(tài)的 Web 頁面。同時需要注意，任何的 DOM 操作都會影響頁面的性能，如果操作過于復(fù)雜或頻繁，會導(dǎo)致頁面的卡頓和加載速度變慢，因此我們需要謹慎使用。

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

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