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);