請關注“知了堂學習社區”，地址：http://www.zhiliaotang.com/portal.php
1.查找HTML元素
a.通過標籤名
var x = document.getElementsByTagName("p");b.通過類名
var x = document.getElementsByClassName("p");c.通過id
var x = document.getElementById("intro");如果找到該元素，則該方法將以對象（在x中）的 形式返回該元素；
如果未找到該元素，則x將包含null；
2.改變HTML內容
a.innerHTML
b.innerText，只改變文本內容
document.getElementById(id).innerHTML = 新的HTML
document.getElementById(id).innerText = 新的文檔內容3.改變HTML屬性
document.getElementById(id).attribute = 新屬性值4.改變HTML樣式
document.getElementById(id).style.property = 新樣式
//加入class樣式表
document.getElementById(id).className = "類名"5.創建HTML元素節點
a.需要document.createElement（節點名稱）
b.子父關係，node.appendChild（節點對象）
6.刪除HTML元素節點
Eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<div id="rig">
<p>選擇顏色</p>
<p>
<span style="background: red" id="c01">紅色</span>
<span style="background: yellow" id="c02">黃色</span>
<span style="background: blue" id="c03">藍色</span>
</p>
<p>選擇寬度</p>
<p>
<span id="s01">100</span>
<span id="s02">150</span>
<span id="s03">200</span>
</p>
<p>選擇高度</p>
<p>
<span id="h01">100</span>
<span id="h02">150</span>
<span id="h03">200</span>
</p>
</div>
</div>
<div class="content" id="content"></div>
<script>
window.onload = function(){
var c01 = document.getElementById("c01");
var c02 = document.getElementById("c02");
var c03 = document.getElementById("c03");
var s01 = document.getElementById("s01");
var s02 = document.getElementById("s02");
var s03 = document.getElementById("s03");
var h01 = document.getElementById("h01");
var h02 = document.getElementById("h02");
var h03 = document.getElementById("h03");
c01.onclick = function(){
var content = document.getElementById("content");
content.style.background = "red";
}
c02.onclick = function(){
var content = document.getElementById("content");
content.style.background = "yellow";
}
c03.onclick = function(){
var content = document.getElementById("content");
content.style.background = "blue";
}
s01.onclick = function(){
var content = document.getElementById("content");
content.style.width = 100 +"px";
}
s02.onclick = function(){
var content = document.getElementById("content");
content.style.width = 150 +"px";
}
s03.onclick = function(){
var content = document.getElementById("content");
content.style.width = 200 +"px";
}
h01.onclick = function(){
var content = document.getElementById("content");
content.style.height = 100 +"px";
}
h02.onclick = function(){
var content = document.getElementById("content");
content.style.height = 150 +"px";
}
h03.onclick = function(){
var content = document.getElementById("content");
content.style.height = 200 +"px";
}
}
</script>
</body>
</html>