主要內容：

　　1、HTML DOM元素

　　2、HTML DOM事件

　　3、HTML DOM實例

一、DOM元素

　　主要操作有添加、刪除和替換HTML元素

　　1、創建新的HTML元素

　　　（1）方法一： appendChild() 追加

　　如需向 HTML DOM 添加新元素，您首先必須創建該元素，然後把它追加到已有的元素上。

　　實例和解析：　

<div id="box1">
    <p id="p1">This is first paragraph.</p>
    <p id="p1">This is second paragraph.</p>
</div>

<script>
    //
 
 創建一個新的<p>元素
    var para = document.createElement("p");    

    // 如需向<p>元素添加文本，你要首先創建文本節點，以下這句即為創建文本節點
    var node = document.createTextNode("This is new!");

    // 接下來，你要將文本節點追加到<p>元素中
    para.appendChild(node);    
    
   // 最後，要向已有的元素中追加這個元素，先查找到這個元素
   var element = document.getElementById("box1"); 
 
   
 
// 將新元素添加到已有的元素中
   element.appendChild(para);
   
</script>

　　（2）方法二：insertBefore(new,old) 插入

　　實例：

<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");//
 
 創建一個新的<p>元素
var node = document.createTextNode("This is another one!"); // 創建文本節點
para.appendChild(node); // 向<p>中追加文本節點

var element = document.getElementById("box");// 查找<p>節點的父節點
var child = document.getElementById("p1"); // 找到<p>節點的同胞節點
element.insertBefore(para,child);// 將新創建的<p>節點插入到id為p1的同胞節點之前

　　2、刪除已有的HTML元素

　　　　如需刪除HTML元素，你需要知道該元素的父元素。

　　　　實例：　　

<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
    // 獲取父元素
    var parent = document.getElementById("box1"); 
    // 獲取要刪除的元素
    var child = document.getElementById("p1");
    // 刪除該元素
    parent.removeChild(child);
</script>

　　　　簡略方法：找到您需要刪除的子元素，然後使用 parentNode 屬性來查找其父元素

var child = document.getElementById("p1");
child.parentNode.removeChild(child); // child.parentNode表示child的父元素

　　3、替換HTML元素

如需替換 HTML DOM 中的元素，請使用 replaceChild(new,old) 方法：　

<div id="box1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode(" This is new new !");
    para.appendChild(node);
    
    var parent = document.getElementById("box1");
    var child = document.getElementById("p2");
    parent.replaceChild(para,child);
</script>

未完待續...

前端開發之JavaScript HTML DOM理論篇二