1、Javascript-DOM简介
1.1、HTML DOM
1.2、DOM操作HTML
1.2.1、JavaScript能够改变页面中的所有HTML元素
1.2.2、JavaScript能够改变页面中的所有HTML属性
1.2.3、JavaScript能够改变页面中的所有CSS样式
1.2.4、JavaScript能够对页面中的所有时间做出反应
2、Javascript-DOM操作HTML
2.1、DOM操作HTML
2.1.1、改变HTML输出流：
注意：绝对不要在文档加载完成之后使用document.write();这会覆盖该文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>hello</p>
<button onclick="demo()">按钮</button>
<!--这里在点击button按钮时文档是处于已经加载完毕的状态了
点击按钮会覆盖之前文档的内容-->
<script>
function demo(){
document.write("???");
}
</script>
</body>
</html>
2.1.2、寻找元素：
通过id找到HTML元素
这个就是平常写的
通过标签名字找到HTML元素
这个用来修改标签内部属性的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="aid" href="http://www.baidu.com">link</a>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href="http://www.jikexueyuan.com";
}
</script>
</body>
</html>
2.1.3、改变HTML内容：
使用属性：innerHTML
2.1.4、改变HTML属性：
使用属性：attribute
例子就在上面2.1.2中
3、Javascript-DOM操作CSS
3.1、通过DOM对象改变CSS
语法：document.getElementById(id).style.property = new style
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="div" class="div"></div>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("div").style.background = "blue";
// document.getElementById("div").style.backgroundColor = "aqua";
}
</script>
</body>
</html>
4、Javascript-DOM EventListener
同过添加EventListener可以一定程度避免在修改事件处理函数时造成不必要的麻烦。
4.1、DOM Eventlistener
方法：addEventListener():
removeEventListener():
4.2、addEventListener():
方法用于向指定元素添加事件句柄
4.3、removeEventListener:
移除方法添加的句柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){
alert("hello");
})
/*上面这就叫一个句柄*/ var x = document.getElementById("btn");
x.addEventListener("click",hello1);
x.addEventListener("click",world)
/*上面就是添加了两个句柄*/
function hello1(){
alert("helloaaa");
}
function world(){
alert("world")
}
/*移除添加的句柄*/
x.removeEventListener("click",hello1);
x.removeEventListener("click",world);
</script>
</body>
</html>