- 認(rèn)識DOM
DOM：Document Object Model岖妄，文檔對象模型秫舌。定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法仑乌。DOM將HTML文檔呈現(xiàn)為帶有元素炊甲、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）鱼炒。
先來看看下面的代碼：
DOM1.jpg
將HTML代碼分解為DOM節(jié)點層次圖：
DOM2.jpg
HTMl文檔可以說是有節(jié)點構(gòu)成的集合衔沼，三種常見的DOM節(jié)點：- 元素節(jié)點：上圖中
<html>、<body>昔瞧、<p>等都是元素節(jié)點指蚁，即標(biāo)簽。 - 文本節(jié)點：向用戶展示的內(nèi)容自晰，如
<li>...</li>中的JavaScript凝化、DOM、CSS等文本酬荞。 - 屬性節(jié)點：元素屬性搓劫，如
<a>標(biāo)簽的鏈接屬性瞧哟。
看下面的代碼：
<a >JavaScript DOM</a> - 元素節(jié)點：上圖中
- 通過ID獲取元素
學(xué)過HTML/CSS樣式，都知道枪向，網(wǎng)頁由標(biāo)簽將信息組織起來勤揩，而標(biāo)簽的id屬性值是唯一的，就像是每人有一個身份證號一樣遣疯，只要通過身份證號就可以找到相對應(yīng)的人雄可。那么在網(wǎng)頁中，我們通過id先找到標(biāo)簽缠犀，然后進(jìn)行操作数苫。
語法：
document.getElementById(“id”)
- innerHTML屬性
innerHTML屬性用于獲取或替換HTML元素的內(nèi)容。
語法：
Object.innerHTML
注意：
1. Object是獲取的元素對象辨液，如通過document.getElementById("ID") 獲取的元素虐急。
2. 注意書寫，innerHTML區(qū)分大小寫滔迈。
我們通過 id = "con" 獲取 <p> 元素止吁，并將元素的內(nèi)容輸出和改變元素內(nèi)容，代碼如下：
<!DOCTYPE HTML> <html> <head> <title>innerHTML</title> </head> <body> <p id="con">Hello world!</p> <script type="text/javascript"> var mycon= document.getElementById("con") ; document.write("p標(biāo)簽原始內(nèi)容:"+mycon.innerHTML+"<br>"); mycon.innerHTML = "New text!"; document.write("p標(biāo)簽修改后的內(nèi)容:"+mycon.innerHTML); </script> </body> </html>
結(jié)果：
- 改變HTML樣式
HTML DOM運行JavaScript改變HTML元素的樣式燎悍。
語法：
Object.style.property = new style;
注意:Object是獲取的元素對象敬惦，如通過 document.getElementById("id") 獲取的元素。
基本屬性表（property）:
注意:該表只是一小部分CSS樣式屬性谈山，其它樣式也可以通過該方法設(shè)置和修改俄删。
看看下面的代碼:
改變
<p> 元素的樣式，將顏色改為紅色奏路，字號改為20,背景顏色改為藍(lán)：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
結(jié)果:
- 顯示和隱藏（display屬性）
網(wǎng)頁中經(jīng)常會看到顯示和隱藏的效果畴椰，可通過 display 屬性設(shè)置。
語法：
Object.style.display = value
注意:Object是獲取的元素對象鸽粉，如通過 document.getElementById("id") 獲取的元素斜脂。
value取值:
示例代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display = 'none';
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display = 'block';
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做為一個Web開發(fā)師來說，如果你想提供漂亮的網(wǎng)頁触机、令用戶滿意的上網(wǎng)體驗帚戳，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隱藏內(nèi)容" />
<input type="button" onclick="showtext()" value="顯示內(nèi)容" />
</form>
</body>
</html>
- 控制類名（className屬性）
className屬性設(shè)置或返回元素的class屬性儡首。
語法：
object.className = "className";
作用：
1. 獲取元素的 class 屬性销斟；
2. 為網(wǎng)頁內(nèi)的某個元素指定一個CSS樣式來更改該元素的外觀。
示例代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能椒舵。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = 'one';
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = 'two';
}
</script>
</body>
</html>
