javascript学习笔记（四）：DOM操作HTML

当网页被加载时，浏览器会创建页面的文档对象模型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.