1.認識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標准方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節點層次圖:
HTML文檔可以說由節點構成的集合，三種常見的DOM節點:
1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標簽。
2. 文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點:元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"。
看下面代碼:
<a href="http://www.imooc.com">JavaScript DOM</a>
2.通過ID獲取元素
學過HTML/CSS樣式，都知道，網頁由標簽將信息組織起來，而標簽的id屬性值是唯一的，就像是每人有一個身份證號一樣，只要通過身份證號就可以找到相對應的人。那么在網頁中，我們通過id先找到標簽，然后進行操作。
語法:
document.getElementById(“id”)
看看下面代碼:
結果:null或[object HTMLParagraphElement]
注:獲取的元素是一個對象，如想對元素進行操作，我們要通過它的屬性或方法。
3.innerHTML 屬性
innerHTML 屬性用於獲取或替換 HTML 元素的內容。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。
2.注意書寫，innerHTML區分大小寫。
我們通過id="con"獲取<p> 元素，並將元素的內容輸出和改變元素內容，代碼如下:
結果:
4.改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？
語法:
Object.style.property=new style;
注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
基本屬性表（property）:
注意:該表只是一小部分CSS樣式屬性，其它樣式也可以通過該方法設置和修改。
看看下面的代碼:
改變 <p> 元素的樣式，將顏色改為紅色，字號改為20,背景顏色改為藍：
<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>
結果:
5.顯示和隱藏（display屬性）
網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。
語法：
Object.style.display = value
注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
value取值:
看看下面代碼:
6.控制類名（className 屬性）
className 屬性設置或返回元素的class 屬性。
語法：
object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀
看看下面代碼，獲得 <p> 元素的 class 屬性和改變className：
結果:
