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>