当网页被加载时，浏览器会创建页面的文档对象模型（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>