DOM：就是用JavaScript操作HTML節點。
知識點：
=》將HTML變成DOM樹
看到HTML會畫DOM樹。
=》創建節點，添加節點，刪除節點
varnodeObj = document.createElement(“節點名”); //創建元素節點
document.createTextNode(“文本”); //創建文本節點
父節點.appendChild(子節點); //把子節點添加到父節點下
父節點.removeChild(子節點);
//獲得節點
document.getElementById(“id號”);
document.getElementsByTagName(“html的標籤名”)[0];
父節點.getElementsByTagName(“html的標籤名”)[0];
//獲得子元素的節點
父節點.childNodes
父節點.firstChild
父節點.lastChild
//節點的屬性
nodeType 1元素節點 2屬性節點 3文本節點
nodeName 元素節點使用，返回標籤名的大寫字符串
nodeValue 文本節點使用，返回或設置文本
//獲得兄弟節點
當前節點.nextSiblings
=》設置節點的屬性
節點.setAttribute(屬性名,值);
節點.getAttribute(屬性名);
p.setAttrubute(“style”,”color:red;font-size:20px;”);
//一般做法，可以設置或獲取
節點.屬性名
=》設置文本
文本節點.nodeValue=文本;
案例：點擊小圖看大圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="gb2312" />
<style type="text/css">
body{
background-color:pink;
}
#div{
/*border:1px solid green;*/
margin:40px auto;
width:900px;
}
#ul li{
float:left;
margin-right:10px;
list-style-type:none;
}
p{
background-color:silver;
width:50%;
margin:0 auto;
top:10px;
text-align:center;
}
#divShow{
/*border:1px solid red;*/
width:640px;
height:400px;
margin:10px auto;
clear:both;
}
</style>
</head>
<body>
<div id="div">
<ul id="ul">
<li>
<a href="imgs/0.jpg">
<img src="imgs_small/0.jpg" title="圖片111"></img>
</a>
</li>
<li>
<a href="imgs/1.jpg">
<img src="imgs_small/1.jpg" title="圖片222"></img>
</a>
</li>
<li>
<a href="imgs/2.jpg">
<img src="imgs_small/2.jpg" title="圖片333"></img>
</a>
</li>
<li>
<a href="imgs/6.jpg">
<img src="imgs_small/6.jpg" title="圖片444"></img>
</a>
</li>
<li>
<a href="imgs/4.jpg">
<img src="imgs_small/4.jpg" title="圖片555"></img>
</a>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//創建一個div節點
var divShow = document.createElement("div");
//設置div的id屬性
divShow.setAttribute("id","divShow");
//創建一個img節點
var img = document.createElement("img");
//設置img的id屬性
img.setAttribute("id","img");
//設置img的src屬性
img.setAttribute("src","imgs/face.jpg");
//將img節點添加到div下
divShow.appendChild(img);
//創建文本說明標籤p
var p = document.createElement("p");
p.setAttribute("id","p");
p.appendChild(document.createTextNode("說明"));
//得到HTML中的body節點
var body = document.getElementsByTagName("body")[0];
//將div添加到body節點下
body.appendChild(divShow);
body.appendChild(p);//把p添加到body下
//爲元素添加單擊事件
//節點對象.事件名 = new function(){};
//得到所有的<a>標籤
var alist = document.getElementById("div").getElementsByTagName("a");
for(var i = 0;i < alist.length; i++){
//當鼠標點擊時切換圖片
alist[i].onclick = function(){
//this就表示當前被點擊的節點
//點誰獲得誰的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[0];
var title = img.getAttribute("title");
//修改img標籤的src屬性
var img = document.getElementById("img");
img.setAttribute("src",href);
//修改p標籤的文本
var p = document.getElementById("p");
p.firstChild.nodeValue=title;
//取消<a>標籤的跳轉
return false;
}
//當鼠標稱上去的時候切換圖片
alist[i].onmousemove = function(){
//this就表示當前被點擊的節點
//點誰獲得誰的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[0];
var title = img.getAttribute("title");
//修改img標籤的src屬性
var img = document.getElementById("img");
img.setAttribute("src",href);
//修改p標籤的文本
var p = document.getElementById("p");
p.firstChild.nodeValue=title;
//取消<a>標籤的跳轉
return false;
}
}
</script>
