一、DOM简介
当浏览器网页加载时，浏览器会创建页面的文档对象模型（Document Object Model），用来将标记性文档封装成对象，并将标记性文档中的所有内容（标签、文本、属性等）都封装成对象，封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容。
DOM模型有三种：
- DOM1：将html文档封装成对象
- DOM2：在DOM1基础上加入了新功能，比如解析名称空间
- DOM3：将xml文档封装成了对象
结构如下图：
二、DOM操作HTML
- JavaScript可以改变页面中的所有HTML有元素
- JavaScript可以改变页面中的所有HTML属性
- JavaScript可以改变页面中的所有CSS样式
- JavaScript可以对所有事件做出反应
1.JavaScript-DOM操作HTML
【1】改变HTML输出流
注意：绝对不要在文档加载完成后使用document.write()，会覆盖页面该文档。如下例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p>Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.write("world");
}
</script>
</body>
</html>初始界面：
点击按钮后：
下面的代码避免了这个问题：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo(){
var temp = document.getElementById("pid"); <!--通过ID寻找元素-->
temp.innerHTML = "World";
<!-- document.getElementById("pid").innerHTML = "World" 也可以这样写-->
}
</script>
</body>
</html>可以看到之前的页面内容被覆盖
【2】寻找元素
有两种方式：通过标签的id以及通过标签名都可以找到元素。
【3】改变HTML内容
使用innerHTML属性
【4】改变HTML属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<a href="http://www.baidu.com" id="aid">Hello</a>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href="http://www.w3school.com.cn";
}
</script>
</body>
</html>2.JavaScript-DOM改变页面中的CSS
语法：document.getElementById(id).style.property=new style
style.css文件：
.div{
width: 100px;
height: 100px;
background-color: red;
}index.html文件：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<body>
<div id="div" class="div">
Hello
</div>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("div").style.background="blue";
}
</script>
</body>
</html>点击按钮前：
点击按钮后：
3.JavaScript-DOM对事件做出反应
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">hello</p>
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click", function(){alert("hello")});
</script>
</body>
</html>点击按钮后弹出警告框，内容为hello。
删除句柄：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">hello</p>
<button id="btn">按钮</button>
<script>
var x = document.getElementById("btn");
function hello(){alert("Hello")} <!-- 句柄 -->
function world(){alert("World")}
x.addEventListener("click", hello);
x.addEventListener("click", world);
<!-- 删除句柄 如果没有这句，点击按钮，先弹出Hello，点击确认后会再弹出world，下面这句会删除hello-->
x.removeEventListener("click", hello);
</script>
</body>
</html>三、事件流
- 事件流：描述的是在页面中接受事件的顺序。
- 事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素节点
- 事件捕获：最不具体的节点先接收事件，二最具体的节点应改是最后接收事件。
1.html事件处理
直接添加到HTML结构中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">hello</p>
<button id="btn" onclick="hello()">按钮</button>
<script>
function hello(){alert("Hello")}
</script>
</body>
</html>
2.DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">hello</p>
<button id="btn">按钮</button>
<script>
var x = document.getElementById("btn");
x.onclick = hello;
function hello(){alert("Hello")} <!-- 句柄 -->
</script>
</body>
</html>
3.DOM2级事件处理
addEventListener("事件名称","事件处理函数","布尔值")
true：事件捕获。
false：事件冒泡。
removeEventListener()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">hello</p>
<button id="btn">按钮</button>
<script>
var x = document.getElementById("btn").addEventListener("click", hello)
function hello(){alert("Hello")}
</script>
</body>
</html>
4.IE事件处理程序
attachEvent
detachEvent
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">hello</p>
<button id="btn">按钮</button>
<script>
var x = document.getElementById("btn");
if(x.addEventListener){
x.addEventListener("click", hello);
}else if(x.attachEvent){
x.attachEvent("onclick", hello);
}else{
x.onclick=demo();
}
function hello(){alert("Hello")}
</script>
</body>
</html>