Javascript是一種用于為網站添加交互性和動態性的編程語言。而頁面元素則是網站中重要的一部分，例如按鈕、表格、圖像等。在本文中，我們將討論Javascript如何操作和控制頁面元素，以及一些關鍵的函數和屬性。
首先，我們來看看如何使用Javascript獲取頁面元素。可以使用document對象來獲取一個HTML元素，例如：

<p>var button = document.getElementById("myButton");</p>

這個代碼獲取了一個ID為"myButton"的按鈕元素，并將它存儲在一個變量中。我們可以使用這個變量來對這個元素進行進一步的操作，例如：

<p>button.onclick = function() { alert("Hello!"); }</p>

這個代碼會讓按鈕在被點擊時彈出一個警告框，顯示“Hello!”。
除了通過ID獲取元素外，還可以使用document對象的其他函數來定位元素。例如，使用getElementsByClassName函數可以獲取一個class名為myClass的所有元素：

<p>var elements = document.getElementsByClassName("myClass");</p>

要注意的是，這個函數返回的是一個包含所有符合條件的元素的數組。如果只想獲取第一個元素，可以使用以下代碼：

<p>var firstElement = document.getElementsByClassName("myClass")[0];</p>

另一個常用的方法是使用querySelector來獲取某個CSS選擇器匹配的第一個元素。例如：

<p>var element = document.querySelector("div.myClass");</p>

這個代碼獲取了第一個class名為myClass的div元素。
一旦獲取了一個頁面元素，我們就可以對它進行操作。例如，可以改變它的樣式，或者動態地改變它的內容。以下是一些常用的操作：
改變樣式：

<p>var element = document.getElementById("myElement");</p>
<p>element.style.color = "#ff0000";</p>
<p>element.style.backgroundColor = "#00ff00";</p>

這個代碼將一個ID為myElement的元素的文字顏色設置為紅色，背景色設置為綠色。需要注意的是，如果要修改指定的CSS樣式屬性，需要使用駝峰式命名，例如backgroundColor。
改變內容：

<p>var element = document.getElementById("myElement");</p>
<p>element.innerHTML = "New content";</p>

這個代碼將一個ID為myElement的元素的內容設置為“New content”。
除了使用innerHTML屬性來操作內容外，還可以使用innerText屬性來設置元素的文本內容，或者使用textContent屬性來設置元素的所有內容，包括HTML標記。例如：

<p>var element = document.getElementById("myElement");</p>
<p>element.innerText = "Just text";</p>
<p>element.textContent = "HTML <b>markup</b>";</p>

這個代碼將一個ID為myElement的元素的文本內容分別設置為“Just text”和“HTMLmarkup”。
最后，還有一些針對特定元素類型的函數和屬性。例如，可以使用setAttribute函數來設置一個元素的屬性，例如img的src屬性。例如：

<p>var element = document.getElementById("myImage");</p>
<p>element.setAttribute("src", "new_image.jpg");</p>

這個代碼將一個ID為myImage的img元素的src屬性設置為“new_image.jpg”。
總之，Javascript提供了豐富的函數和屬性來操作和控制頁面元素，使得我們可以通過編程來實現各種動態和交互性效果。無論是實現簡單的樣式和內容的修改，還是對事件和屬性的響應，Javascript都可以幫助我們實現各種想象中的網頁效果。