当网页被加载时，浏览器会创建页面的文档对象模型Document Object Model，简称DOM
Dom操作html
1:改变页面中所有HTML元素
2:改变页面中所有HTML属性
3:改变页面中所有css样式
4:对页面中所有事件做出反应
改变页面中HTML元素
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p id="div">Hello</p> <!--设置一个p标签，id为div，显示Hello--> 9 <button onclick="demo()">按钮</button> 10 <script> 11 function demo(){ 12 document.getElementById("div").innerHTML="world"; //查找id=div的元素，并替换其内容。 13 } 14 </script> 15 </body> 16 </html>
改变页面中HTML属性
改变href属性
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a id="aid" href="http://www.baidu.com">Hello</a> <!--默认hello指向www.baidu.com--> 9 <button onclick="demo()">按钮</button> 10 <script> 11 function demo(){ 12 document.getElementById("aid").href="http://www.qq.com"; //点击按钮之后替换掉hello的指向，指向www.qq.com 13 } 14 </script> 15 </body> 16 </html>
在浏览器中运行
默认Hello指向www.baidu.com，点击按钮后，Hello指向www.qq.com
改变src属性
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <img id="imgid" src="1.jpg"> <!--src属性初始为1.jpg--> 9 <button onclick="demo()">按钮</button> 10 <script> 11 function demo(){ 12 document.getElementById("imgid").src="2.jpg";//改变id=imgid的src属性为2.jpg 13 } 14 </script> 15 </body> 16 </html>
在浏览器中运行初始显示1.jpg图片，点击按钮后显示2.jpg图片
改变页面中css样式
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> <!--使用link标签引用css文件，制定rel为web样式表，制定类型type为css样式，href制定外部文件路径--> 7 </head> 8 <body> 9 <div id="div" class="div"> <!--div标签应用于样式表--> 10 Hello 11 </div> 12 <button onclick="demo()">按钮</button> 13 <script> 14 function demo(){ 15 document.getElementById("div").style.background="blue"; <!--更改css样式属性，背景更改为蓝色--> 16 } 17 </script> 18 </body> 19 </html>
新建一个css文件
1 .div{ 2 100px; //宽100 3 height: 100px; //高100 4 background-color: red; //颜色设置为红色 5 }
打开初始背景颜色为红色。
点击按钮后，背景变成蓝色。
对页面中事件做出反应
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id=btn onclick="hello()">按钮</button> //当点击事件发生时按钮时弹窗显示内容 9 <script> 10 function hello(){ 11 alert("hello"); 12 } 13 function world(){ 14 alert("world"); 15 } 16 </script> 17 </body> 18 </html>
其实以上的使用并不是很方便，当函数名修改时，点击事件调用的地方也要修改对应的函数名，而且一个点击事件对应一个函数，使用时不够灵活。
更好的方式是对应某个事件设置一个句柄，通过使用这个句柄进行操作，方便灵活。
这里会涉及到两个函数addEventListener()、removeEventListener()。
addEventListener()：向制定元素添加句柄
removeEventListener()：向制定元素移除句柄
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn">按钮</button> 9 <script> 10 var handle=document.getElementById("btn"); //对应id=btn的元素设置一个名为handle的句柄 11 handle.addEventListener("click",hello); //添加一个句柄，addEventListener("事件"，调用函数名) 12 handle.addEventListener("click",world); 13 //handle.removeEventListener("click",hello); //移除一个句柄，addEventListener("事件"，调用函数名) 14 //handle.removeEventListener("click",world); //移除一个句柄，addEventListener("事件"，调用函数名) 15 function hello(){ 16 alert("hello"); 17 } 18 function world(){ 19 alert("world"); 20 } 21 </script> 22 </body> 23 </html>
在浏览器中运行，点击按钮，先弹窗hello，接着弹窗world.