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

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

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

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

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

有了元素之后，我們就可以操作它們了。下面就分別介紹如何修改樣式、結(jié)構(gòu)和內(nèi)容。

修改樣式

通過javascript可以輕松地修改頁面元素的樣式，實(shí)現(xiàn)類似于鼠標(biāo)懸浮、點(diǎn)擊效果等。例如：

elem.style.backgroundColor = "red";

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

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

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

修改結(jié)構(gòu)

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

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

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

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

document.body.removeChild(tooltip);

修改內(nèi)容

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

elem.innerHTML = "這是新的內(nèi)容";

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

elem.innerText = "這是新的文本內(nèi)容";

需要注意的是，使用innerHTML時(shí)，如果我們的內(nèi)容包含了一些特殊字符，可能會(huì)引發(fā)安全問題。因此最好的做法是使用innerText。

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