Dom tree

• JavaScript 能夠改變頁面中的所有 HTML 元素
• JavaScript 能夠改變頁面中的所有 HTML 屬性
• JavaScript 能夠改變頁面中的所有 CSS 樣式
• JavaScript 能夠對頁面中的所有事件做出反應

查找HTML 元素:

• 通過 id 找到 HTML 元素
• 通過標簽名找到 HTML 元素
• 通過類名找到 HTML 元素

id

var x=document.getElementById("intro");
返回值是一個對象obj

標簽名

var x=document.getElementById("main"); var y=x.getElementsByTagName("p");

通過類名

var x=document.getElementsByClassName("intro");

改變HTML屬性

<img id="image" src="smiley.gif"><script>document.getElementById("image").src="landscape.jpg";</script>

該bainHTML樣式（CSS）

document.getElementById(*id*).style.*property*=*新樣式*
例子:
=========
<p id="p1">Hello World!</p><p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";//顏色
document.getElementById("p2").style.fontFamily="Arial";//字體
document.getElementById("p2").style.fontSize="larger";//字號
</script>""
==========

使用事件

當事件被觸發(fā)時執(zhí)行代碼:

<h1 id="id1">我的標題 1</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'">點我!</button>

隱藏文本和顯示文本語法:

<input type="button" value="隱藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" /> <input type="button" value="顯示文本" onclick="document.getElementById('p1').style.visibility='visible'" />