在網頁開發中，JavaScript是不可或缺的一部分。它能夠使頁面更加豐富和交互性更強。在本篇文章中，我將介紹JavaScript是如何修改頁面的。讓我們開始吧！ 首先，我們需要了解如何獲取DOM元素。DOM代表文檔對象模型，是JavaScript與HTML之間的接口。我們可以使用document對象來獲取HTML中元素的引用。例如，我們要獲取頁面上的一個按鈕元素以便修改它的屬性：

<button id="myBtn">Click Me!</button>

我們可以使用如下代碼獲取這個按鈕元素：

const btn = document.getElementById('myBtn');

現在我們可以使用btn對象來修改它的樣式（style）和內容（innerText或innerHTML）：

btn.style.backgroundColor = 'red';
btn.innerText = 'I am clicked';

上述代碼將按鈕的背景顏色更改為紅色，并將文本更改為“I am clicked”。

其次，我們可以使用JavaScript來添加和刪除HTML元素。例如，我們要在頁面上添加一個段落元素：

const para = document.createElement('p');
para.innerText = 'This is a new paragraph';
document.body.appendChild(para);

上述代碼創建了一個新的段落元素，并將其添加到頁面的body元素中。除了appendChild，我們還可以使用insertBefore方法將元素插入到指定的位置。同時，我們也可以使用removeChild方法來刪除指定的元素。

最后，我們可以使用JavaScript來操作form表單。例如，在用戶提交表單時驗證用戶輸入是否有效：

const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {
// 防止表單提交
e.preventDefault();
// 獲取表單中的輸入框及其值
const username = form.elements['username'].value;
const password = form.elements['password'].value;
// 進行驗證
if (username === '' || password === '') {
alert('用戶名和密碼不能為空');
} else if (password.length < 6) {
alert('密碼應該至少6位');
} else {
alert('驗證通過');
}
});

上述代碼創建了一個表單事件監聽器，當用戶提交表單時，將獲取username和password輸入框的值，并進行驗證。如果驗證失敗，則提示相關錯誤信息。否則，將提示“驗證通過”。

總之，JavaScript可以使網頁變得更加動態和交互。無論是更改HTML元素的樣式、添加和刪除元素還是對表單進行操作，JavaScript都有強大的功能。希望本篇文章對您有所幫助！