什麼是DOM?
DOM是HTML文檔對象模型（HTML）定義的一套标準方法，用來通路和操作HTML文檔。
DOM是以樹狀結構組織HTML文檔的，根據DOM,HTML每個标簽或元素都是一個節點
- 整個文檔是一個文檔節點
- 每個HTML标簽都是一個元素節點
- 包含在HTML元素中的文本都是文本節點
- 每一個HTML屬性都是一個屬性節點
- 注釋屬于注釋節點
當網頁被加載時，浏覽器會自動建立頁面的文檔對象模型（DOM）,構造了文檔對象樹，通過可程式設計的對象模型，JavaScript就可以動态的控制或者說操作建立HTML文檔
- 改變頁面中的HTML元素
- 改變頁面中的HTML屬性
- 改變頁面中的CSS樣式
- 對頁面中的事件作出反應
DOM: Core DOM ,XML DOM 和 HTML DOM 三部分組成。
查找HTML元素
- 通過id查找HTML元素。用方法：document.getElementById(id_name);
- 通過标簽名查找HTML元素。用方法：getElementsByTagName(tag_name);
- 通過類名查找 HTML 元素getElementsByClassName(class_name)
擷取子元素&兄弟元素&父元素
element.childNodes: 擷取指定元素的子節點,包括文本節點、元素節點等
element.children: 擷取指定元素的子元素,隻會擷取元素節點。
element.nextSibling: 擷取指定元素的下一個兄弟節點
element.nextElementSibling: 擷取指定元素的下一個兄弟元素
element.previousSibling: 擷取指定元素的上一個兄弟節點
element.previousElementSibling: 擷取指定元素的上一個兄弟元素
element.parentNode: 擷取元素的父節點,父節點肯定是一個元素 擷取第一&最後一個子元素
element.firstChild: 擷取指定元素下面的第一個子節點
element.firstElementChild: 擷取指定元素下面的第一個子元素
element.lastChild: 擷取指定元素下面的最後一個子節點
element.lastElementChild: 擷取指定元素下面的最後一個子元素 節點操作
克隆節點 - cloneNode()
參數:布爾值,
true代表深層克隆,把目前節點和内部所有節點都複制一份
false代表淺層克隆,隻複制目前節點 添加節點 - appendChild()
father.appendChild(son) 插入節點 - insertBefore()
father.inserBefore(son1_new,son2_old): 将son1插入到father節點下的son2前面 移除節點 - removeChild()
father.removeChild(son): 将father下的son節點移除 建立結構
document.write()
特點:隻能被document調用,而且會覆寫頁面上原有内容
element.innerHtml
特點:往頁面添加html标簽,可以限定範圍
document.createElement()
特點:動态建立标簽,添加到頁面需要配合appendChild使用 标簽的自定義屬性操作
設定标簽屬性: setAttribute()
box.setAttribute("id","aaa");// 有規定的屬性可以設定
box.setAttribute("bbb","ccc");// 沒有規定的屬性也可以設定 擷取标簽屬性:getAttribute()
box.getAttribute("id");// 有規定的可以擷取
box.getAttribute("aaa"); // 沒有規定的也可以擷取 移除标簽屬性:removeAttribute()
box.removeAttribute("id"); // 有規定的可以删除
box.removeAttribute("aaa"); // 沒有規定的也可以删除 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function hh(){
var hText=document.getElementById("fruit").getAttribute("src");
alert("圖檔的路徑是："+hText);
}
function check(){
var favor=document.getElementsByName("enjoy");
var like="你喜歡的水果是：";
for(var i=0;i<favor.length;i++){
if(favor[i].checked==true){
like+="\n"+favor[i].getAttribute("value");
}
}
alert(like);
}
function change(){
var imgs=document.getElementsByTagName("img");
imgs[0].serAttribute("src","images/orange.jpg");
}
</script>
</head>
<body>
<img src="images/fruit.jpg" alt="水果圖檔" id="fruit"/>
<h1 id="love">選擇你喜歡的水果</h1>
<input name="enjoy" type="checkbox" value="apple"/>蘋果
<input name="enjoy" type="checkbox" value="banana"/>香蕉
<input name="enjoy" type="checkbox" value="grape"/>葡萄
<input name="enjoy" type="checkbox" value="pear"/>梨
<input name="enjoy" type="checkbox" value="watermelon"/>西瓜
<br/><input name="btn" type="button" value="顯示圖檔路徑" onclick="hh()"/>
<br/><input name="btn" type="button" value="喜歡的水果" onclick="check()"/>
<br/><input name="btn" type="button" value="改變圖檔" onclick="change()"/>
</body>
</html> 
改變HTML CSS樣式
CSS在頁面中應用非常頻繁，使用這些樣式可以實作頁面中不同樣式的特效，但是這些特效都是靜态的，不能随滑鼠或鍵盤實作 動态的改變。比如購物時，滑鼠移動到指定商品會出現樣式上的變化
那麼如何實作CSS樣式變化呢？
一是使用樣式的style屬性，二是使用樣式的className屬性。
在HTML DOM 中，style是一個對象，代表一個單獨的樣式聲明，可從應用樣式的文檔或元素通路style對象，文法如下：
document.getElementById(" "),style.樣式屬性=“值”； 但是要注意，JavaScript使用CSS樣式和在HTML中使用CSS 會有些不同，比如屬性，font-size在HTML中可以使用，JavaScript不行，因為**“ -”**符号在JavaScript中是減号，在JavaScript中應該是fontSize
.example {
color: #fff;
font-size 1em;
text-align: right;
} function preparePage() {
//當mainContent元素被點選，mainContent的樣式将會改變
document.getElementById("mainContent").onclick = function() {
//檢查目前mainContent的樣式，若是example，則将樣式取消。
//取消樣式直接将className屬性指派為空字元串””就行。
//若mainContent的樣式不是example，則應用example樣式。
if( document.getElementById("mainContent").className == "example") {
document.getElementById("mainContent").className = "";
} else {
document.getElementById("mainContent").className = "example";
}
};
}
window.onload = function() {
preparePage();
}