当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
//显示，改变html内容
document.getElementById("p1").innerHTML="New text!"; //显示，改变html属性
document.getElementById("image").src="landscape.jpg"; //显示，改变html CSS
document.getElementById("p2").style.color="blue"; //使用 HTML DOM 来分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};
<!--
增加HTML元素
首先添加元素，然后添加文本节点，随后在之前的元素上追加文本节点，
最后在已有的元素上追加之前创建的DOM元素
--> <!DOCTYPE html>
<html>
<body> <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node); var element=document.getElementById("div1");
element.appendChild(para);
</script> </body>
</html>
<!--
删除已有的HTML元素
先找出该元素的父元素，然后再找出该元素，
在父元素的基础上删除
--> <!DOCTYPE html>
<html>
<body> <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
/*
或这么写，不用找父元素
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
*/
</script> </body>
</html>