参考资料：
1. http://www.w3school.com.cn/js/js_htmldom.asp
2. http://www.runoob.com/htmldom/htmldom-tutorial.html
☂ 知识点：
☞ HTML DOM定义了访问和操作HTML和XML文档的标准方法。
☞ W3C DOM标准分3个不同的部分：1. 核心DOM - 针对任何结构化文档的标准模型。
2. XML DOM - 针对XML文档的标准模型。
3. HTML DOM - 针对HTML文档的标准模型。
☞ HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。
图1 DOM树
- 改变HTML输出流
在Javascript中，document.write()可用于直接向HTML输出流写内容。
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
- 改变HTML内容
document.getElementById(id).innerHTML=new HTML
- 改变HTML属性
document.getElementById(id).attribute=new value
- 改变HTML样式
document.getElementById(id).style.property=new style
- 创建新的HTML元素
<div id="div1"> <p id="p1">段落1</p> <p id="p2">段落2</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("段落3"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>
- 删除已有的HTML元素
<div id="div1"> <p id="p1">段落1</p> <p id="p2">段落2</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>
- 事件
<h1 onclick="this.innerHTML='This is a test.'">Click me now!</h1>
<h1 onclick="changetext(this)">Click me now!</h1>
使用DOM添加事件
<script> document.getElementById("bt").onclick=function(){displayDate()}; </script>