操作DOM元素，document object model
规定浏览器中所有的标签为树状结构
模态框案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框案例</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } #box{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); } #content{ position: relative; top: 150px; width: 400px; height: 200px; text-align:center; color: #000; background-color: #FC4B38; margin: auto; } #x{ position: absolute; top: 0; right: 0; width: 30px; height: 20px; ling-height: 20px; background-color: #556B2F; } </style> </head> <body> <button id="btn">弹出</button> <script type="text/javascript"> var btn=document.getElementById("btn");//通过元素ID获取dom元素 //创建一个div元素 var odiv=document.createElement("div"); var op=document.createElement("p"); var ospan=document.createElement("span"); ospan.innerHTML="X"; ospan.id="x"; op.id="content"; //给当前元素添加内容 op.innerHTML="模态框弹出"; //添加子节点 odiv.appendChild(op); op.appendChild(ospan); odiv.id="box"; btn.onclick=function (ev) { //动态添加html元素,将divDom插入到btn前面 //this表示btn对象 this.parentNode.insertBefore(odiv,btn) }; ospan.onclick=function (ev) { //获取到它的父节点，再通过父节点来删除它自己 odiv.parentNode.removeChild(odiv); } </script> </body> </html>
- 获取节点元素
- 创建节点元素
- 设置节点对象属性
- 添加对象属性内容
- 在节点兑现 前后添加新的对象
- 删除对象元素前后对象