作為前端開發中最重要的一門語言，JavaScript可以用來改變一切與用戶界面相關的東西。無論是修改頁面上的樣式、結構還是內容，javascript都能盡情發揮它的功力，讓頁面在不同的情況下呈現出不同的樣子。

要修改頁面，最基本的一步就是獲取對應的元素。對于單個元素，我們可以使用document.getElementById方法來獲取，如下：

var elem = document.getElementById("someId");

如果要獲取多個元素，則可以使用document.querySelectorAll方法，如下：

var elems = document.querySelectorAll(".someClass");

有了元素之后，我們就可以操作它們了。下面就分別介紹如何修改樣式、結構和內容。

修改樣式

通過javascript可以輕松地修改頁面元素的樣式，實現類似于鼠標懸浮、點擊效果等。例如：

elem.style.backgroundColor = "red";

上述代碼將指定元素的背景色修改為紅色。類似地，我們也可以通過修改其它屬性來實現不同的效果，如下：

elem.style.color = "blue";
elem.style.fontSize = "20px";
elem.style.border = "1px solid green";

這些屬性和CSS中的寫法一致，我們只需要在javascript中添加style屬性，并指定相應的值即可。

修改結構

有時候我們可能需要在頁面中添加或移除某個元素，以此來實現某些交互效果。比如添加一個tooltip：

var tooltip = document.createElement("div");
tooltip.innerHTML = "這是一個提示";
tooltip.style.position = "absolute";
tooltip.style.top = event.clientY + 10 + "px";
tooltip.style.left = event.clientX + 10 + "px";
document.body.appendChild(tooltip);

在上述代碼中，我們通過document.createElement方法創建了一個div元素，并指定了它的樣式和內容。接著，我們將它添加到了body元素中，這樣它就可以在頁面上顯示出來了。

類似地，我們也可以通過removeChild方法來移除某個元素：

document.body.removeChild(tooltip);

修改內容

要修改一個元素的內容，最簡單的方法就是直接修改其innerHTML屬性：

elem.innerHTML = "這是新的內容";

如果我們要修改元素的文本內容，則需要使用innerText屬性：

elem.innerText = "這是新的文本內容";

需要注意的是，使用innerHTML時，如果我們的內容包含了一些特殊字符，可能會引發安全問題。因此最好的做法是使用innerText。

以上就是javascript修改畫面的一些基本方法，當然還有很多其它高級的玩法，如動畫效果、事件綁定等，不過這就需要我們更深入的學習了。