JS
DOM
文档==一棵树
当网页被加载的时候，浏览器就会创建文档对象模型，也就是dom
而dom可以看做一颗树
为什么要有这么一颗树呢？
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
- 接下来我们来找一找元素吧
在树上找元素
我们如何在dom树上找到元素呢？
- 通过 id 找到 HTML 元素
var x=document.getElementById("intro"); 复制代码
- 通过标签名找到 HTML 元素
var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); 复制代码
- 通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro"); 复制代码
找到元素后我们能做什么呢
改变html
- 改变HTML内容
document.getElementById("p1").innerHTML="更改的文本"; var element=document.getElementById("header"); element.innerHTML="新标题"; 复制代码
- 改变HTML属性
document.getElementById("image").src="更改图片路径"; 复制代码
改变css
document.getElementById("p2").style.color="blue"; 复制代码
dom事件
- dom可以给元素分配事件
document.getElementById("myBtn").onclick=function(){change()}; function change(){ alert('dom分配了的事件') } 复制代码
- dom还可以给指定元素添加事件以及触发方式
document.getElementById("myBtn").addEventListener("click", displayDate); 复制代码
element.addEventListener(event, function, useCapture); 复制代码
event是触发方式，function是触发函数，useCapture是事件冒泡还是捕获
当然还有去除元素绑定事件的方法
removeEventListener() element.removeEventListener("mousemove", myFunction); 复制代码
无中生有之创建dom元素
var element = document.getElementById("div1"); element.appendChild(para);
- 尾部生有
var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); 复制代码
- 头部生有
element.insertBefore('<div>1</div>'); 复制代码
- 过河拆桥
要移除一个元素，你需要知道该元素的父元素，然后再移除他
var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); 复制代码
- 移花接木
var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child);
