JavaScript對HTML DOM 的操作簡述

HTML DOM（文檔對象模型）
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
HTML DOM模型被構造爲對象的樹。

通過可編程的對象模型，JavaScript獲得了足夠的能力來創建動態的HTML。
1、JavaScript能夠改變頁面中的所有HTML元素
2、JavaScript能夠改變頁面中的所有HTML屬性
3、JavaScript能夠改變頁面中的所有CSS樣式
4、JavaScript能夠對頁面中的所有事件作出反應

提示：不要在文檔加載之後使用document.write()。這會覆蓋該文檔。

HTML DOM允許JavaScript改變HTML元素的內容：

document.write();

改變HTML內容：

document.getElementById(id).innerHTML=new HTML;

改變HTML屬性

document.getElementById(id).attribute=new value;

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

document.getElementById(id).style.property=new style;

HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。

JavaScript 添加和刪除節點（HTML 元素）
1、創建新的HTML元素
創建新的<p>元素：

var para=document.createElement("p");

如需向<p>元素添加文本，必須先創建文本節點：

var node=document.createTextNode("這是新段落。")；

然後向<p>元素追加這個文本節點：

para.appendChild(node);

最後，必須向一個已有的元素追加這個新元素。
先找到一個已有元素：

var element=document.getElementById("div1");

然後，向已有元素追加新元素

element.appendChild(para);

2、刪除已有的HTML元素
一個含有兩個子節點（<p>元素）的<div>元素

<div id="div1">
    <p id="p1">這是一個段落</p>
    <p id="p2">這是另一個段落</p>
</div>

找到id=“div1”的元素（要刪除的元素的父元素）：

var parent=document.getElementById("div1");

找到id=“p1”的<p>元素（要刪除的元素）：

var child=document.getElementById("p1");

從父元素中刪除子元素

parent.removeChild(child);