1、DOM操作HTML
1.1 通过查找id修改
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <p id="pid">hello</p> <button onclick="demo()">按钮</button> <script> function demo(){ document.getElementById("pid").innerHTML("world"); } </script> </body> </html>
1.2 修改属性（当点击按钮时，将 baidu 的链接修改为 jikexueyuan ）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <a id="aid" href="http://www.baidu.com">baidu</a> <button onclick="demo()">按钮</button> <script> function demo(){ document.getElementById("aid").href="http://www.jikexueyuan.com"; } </script> </body> </html>
2、DOM操作CSS (通过按钮来改变css样式的颜色)
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 </head> 8 <body> 9 <div id="div" class="div"></div> 10 <button onclick="demo()">按钮</button> 11 <script> 12 function demo(){ 13 document.getElementById("div").style.background="blue"; 14 } 15 </script> 16 </body> 17 </html>
css:
.div{ 100px; height:100px; background-color: red; }
3、DOM EventListener
3.1 addEventListener'
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 </head> 8 <body> 9 <button id="btn">按钮</button> 10 <script> 11 document.getElementById("btn").addEventListener("click", function(){alert("hello world")}); 12 </script> 13 </body> 14 </html>
3.2 多重句柄：（连续弹出连个对话框“hello”、“world”）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 </head> 8 <body> 9 <button id="btn">按钮</button> 10 <script> 11 var x = document.getElementById("btn"); 12 x.addEventListener("click",hello);//句柄 13 x.addEventListener("click",world); 14 15 function hello(){ 16 alert("hello"); 17 } 18 function world(){ 19 alert("world"); 20 } 21 22 </script> 23 </body> 24 </html>
3.3 移除句柄：
x.removeEventListener("click",hello);