最近在學DOM，但是還是沒有辦法很好的記住API，想找些例子來練習，網上的例子將一個個DOM對象方法挨個舉例，並沒有集合在一起用，效果不盡人意。所以自己寫一份實例，順便鞏固下學到的知識。
這個例子很簡單，主要就是操作ul下面的li，但是會貫穿很多DOM的對象方法。
首先在body下面創建一個ul，注意<ul></ul> 之間不要有空格或回車，否則會造成文本節點。
```
<body>
<ul id="fruit"></ul>
</body>
```
接下來就是Javascript代碼了，首先我們需要通過id為“fruit”來獲取ul這個節點。
```
var oUl = document.getElementById("fruit");
```
通過getElementById()便可以獲得ul這個節點了，之后我們要在ul節點下面創建子節點。通過createElement()創建li節點，然后再通過textContent屬性來給新建的節點增加內容，最后在通過appendChild()將li節點綁定到ul上面。
```
var newNode1 = document.createElement("li");
newNode1.textContent = "第一個節點";
oUl.appendChild(newNode1);
var newNode2 = document.createElement("li");
newNode2.textContent = "第二個節點";
oUl.appendChild(newNode2);
```
這樣我們的網頁上就已經有兩個節點了，看下網頁效果。
接下來，我們要在“第二個節點”的前面插入“第三個節點”。所以我們需要先獲取到“第二個節點”，可以通過childNode和nodeList實現，獲取到之后在通過insertBefore()進行插入。
```
var nodeList = oUl.childNodes;
var newNode3 = document.createElement("li");
newNode3.textContent = "第三個節點";
oUl.insertBefore(newNode3,nodeList[1]);
```
效果如下：
現在，我打算用“第四個節點”替換掉“第一個節點”，這里需要用的replaceChild()函數以及獲取第一個元素firstChild。
```
var newNode4 = document.createElement("li");
newNode4.textContent = "第四個節點";
oUl.replaceChild(newNode4,oUl.firstChild);
```
效果如下：
最后，我們來移除最后一個節點，也就是“第二個節點”，用到了lastChild，不過在移除之前，需要用hasChildNodes來判斷oUl是否有子節點。
```
if(oUl.hasChildNodes){
oUl.removeChild(oUl.lastChild);
}
```
至此，DOM簡單的實例完成了。<br/>
這里是完整代碼
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<style>
body{background:#f1f1f1;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById("fruit");//獲取id為“fruit”的元素
var newNode1 = document.createElement("li");//創建一個li節點
newNode1.textContent = "第一個節點";//給新創建的li節點賦值
oUl.appendChild(newNode1);//添加到oUl上
var newNode2 = document.createElement("li");
newNode2.textContent = "第二個節點";
oUl.appendChild(newNode2);
var nodeList = oUl.childNodes;
var newNode3 = document.createElement("li");
newNode3.textContent = "第三個節點";
oUl.insertBefore(newNode3,nodeList[1]);//newNode3插入到nodeList[1]之前
var newNode4 = document.createElement("li");
newNode4.textContent = "第四個節點";
oUl.replaceChild(newNode4,oUl.firstChild);//newNode4替換掉oUl的第一個子節點
if(oUl.hasChildNodes){//如果oUl存在子節點
oUl.removeChild(oUl.lastChild);//刪除oUl的最后一個節點
}
}
</script>
</head>
<body>
<ul id="fruit"></ul>
</body>
</html>
```
