前端---掌握WebAPI：DOM

什么是DOM？

DOM：Dodument Object Model，是文档对象模型。

Document：文档，指的是HTML页面。
Object：对象，指的是JS的对象。

DOM，其实就是把HTML页面上的每个标签对应成JS的一个个对象，通过这些个对象就可以获取/修改标签的内容和属性。

使用DOM

获取元素

let div = document.querySelector('div');
let divs = document.querySelectorAll('div');
1
2

注：

1. document是浏览器提供的一个全局变量，表示当前页面。我们可以借助这个变量来获取到当前页面上的所有元素
2. querySelector（）是用来获取对象的方法，（）里面写CSS的选择器，可以通过选择器来选中不同的元素
3. 如果querySelect（）选择到多个元素，只能将第一个选择到的元素赋值给变量，只能使用到第一个元素
4. querySelectAll（）可以选择到所有元素，会把选择到的元素都放到divs这个数组中。

事件

用户对浏览器进行的操作，都会由浏览器产生对应的“事件”。JS是为了实现和用户的交互的，它就会获取到这些事件来和用户进行交互。

事件的三要素：

1. 事件源：哪个元素触发的
2. 事件类型：点击？选中？修改？
3. 事件处理程序：往往是一个回调函数。回调函数不需要程序员主动调用，它会在触发事件时自动执行。

		 // 让 div 处理鼠标点击事件. 

		//选中div标签
         let div = document.querySelector('div');

		//鼠标点击div标签
         div.onclick = function() {
             console.log('按下鼠标');
         }

		//鼠标在div标签上移动
          div.onmousemove = function() {
             // console.log('鼠标移动');
         }

		//鼠标进入到div标签的区域
         div.onmouseenter = function() {
             console.log('鼠标进来了');
         }

		//鼠标从div标签的区域离开
         div.onmouseleave = function() {
             console.log('鼠标出去了');
         }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

操作元素

获取、修改元素内容

		<div>hello</div>

		// 先选中 div
         let div = document.querySelector('div');
         
         // 获取元素里的内容
         console.log(div.innerHTML);

         // 还可以通过给innerHTML属性赋值, 来起到修改的作用. 
         div.onclick = function() {
             // 这里赋值, 不仅仅能够赋值文本, 还可以赋值一个 html 片段. 
             div.innerHTML = '修改元素内容';
         }
1
2
3
4
5
6
7
8
9
10
11
12
13

注：使用innerHTML属性来获取和修改元素的内容，元素的内容指的是开始标签和结束标签之间夹着的东西（<>这是内容<>）

获取、修改元素属性

		<img src="rose.jpg" alt="这是一朵花" width="50px">

		//选中img标签
		 let img = document.querySelector('img');

		//获取到img标签里的属性
         console.log(img.src);
         console.log(img.width);
         console.log(img.alt);

		//修改img标签的属性
         img.onclick = function() {
             img.src = 'img/female.png';
         }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注：元素的属性指的是元素开始标签里写的键值对！

获取、修改表单元素属性：input

		<input type="button" value="播放">

		//选中input标签
  	 	 var btn = document.querySelector('input');

		//获取input标签的属性
		console.log(btn.value);

		//修改input标签的属性
   		 btn.onclick = function () {
       	 if (btn.value === '播放') {
            btn.value = '暂停';
      	 } else {
            btn.value = '播放';
      	 }
 	  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

获取、修改样式属性

直接修改样式：行内样式

		<div style="font-size: 20px; font-weight: 700;">hello</div>

		//选中div标签
    	var div = document.querySelector('div');

		//直接通过内联属性来修改样式
    	div.onclick = function () {
    		//得到原来的值
        	var curFontSize = parseInt(div.style.fontSize);
        	curFontSize += 10;
        	//设置新的值
        	div.style.fontSize = curFontSize + "px";
   		}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过修改class属性来修改样式

		//准备两个样式不同的类
         .light {
            color: black;
            background-color: white;
        } 

       
         .dark {
            color: white;
            background-color: black;
        }

		//给div标签添加class属性，为了后续的修改样式
		<div class="light">
	        这是一大段话
        	这是一大段话
       	 	这是一大段话
        	这是一大段话
    	</div> 

		//选中div标签
	     let div = document.querySelector('div');

		//通过div标签的class属性来修改样式
         div.onclick = function() {
             // 通过 className 属性获取到 html 元素中的 class 属性
             if (div.className == 'dark') {
                 div.className = 'light';
             } else if (div.className == 'light') {
                 div.className = 'dark';
             } else {
                alert('class 错误!');
             }
         }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

新增节点

		<div class="parent">
        	<div>11</div>
        	<div>22</div>
        	<div>33</div>
	    </div>


		//选中父标签
		let div = document.querySelector('.parent');
		
		// 创建一个新的 div，来添加到父标签里
         let childDiv = document.createElement('div');
         childDiv.innerHTML = '44';

		//通过appendChild（）方法进行新增节点
         div.appendChild(childDiv);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

删除节点

		<div class="parent">
        	<div>11</div>
        	<div>22</div>
        	//设置class属性 方便删除
        	<div class="toDelete">33</div>
    	</div>

		//选中父标签
		let div = document.querySelector('.parent');
		//选中要删除的子标签
        let toDelete = document.querySelector('.toDelete');
        //删除子标签
        div.removeChild(toDelete);
1
2
3
4
5
6
7
8
9
10
11
12
13