5-2 DOM介绍 · 前端笔记

### DOM的介绍 HTML DOM模型被构造为对象的树 ![](https://box.kancloud.cn/c4c51af5ef6e073232441ead1969ad87_702x423.png) #### JavaScript可以通过DOM做什么通过可编程的对象模型，JavaScript获得了足够的能力来创造动态的HTML 1.能够改变页面中所有HTML元素 2.能够改变页面中的所有HTML属性 3.能够改变页面中的所有CSS样式 4.能够对页面中的所有事件作出反应 ### DOM事件 #### 1.onload事件 onload事件--当页面加载完毕之后执行（避免页面从上到下加载导致的问题） window.onload=function() {里面写页面加载完毕后的方法} #### 2.onclick事件 onclick事件--当点击的时候执行 document.getElementById("xx").onclick=function(){ this.属性 = "xxx" } #### 3.焦点事件onfocus/onblur onfocus 获取焦点；onblur 失去焦点 #### 4.鼠标事件onmouseover/onmouseout ~~~ img.onmouseover = function(){ img.src = "images/03.png" } img.onmouseout = function(){ img.src = "images/01.png" } ~~~ ### DOM节点 1.添加节点 ~~~ //html部分 <body> <input type="button" value="创建节点" id="btn"> <div id="info"> </div> </body> ~~~ ~~~ window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ //1.创建一个节点 var p = document.createElement("p"); //2.把节点放进层里面,通过ipt的父节点info来完成添加操作 var info = document.getElementById("info"); info.appendChild(p) } } ~~~ **关键方法**：document.createElement("什么类型的标签") 父类元素.appendChild() 2.删除节点 ~~~ var del = document.getElementById("del"); del.onclick = function(){ //1.先获取到要删除的节点 var ps = document.getElementsByTagName("p"); //2.获取到要删除节点的父元素 var info = document.getElementById("info"); if(ps[0]) info.removeChild(ps[0]); } ~~~ **关键方法**：父类元素.removeChild();