前端---掌握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. 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('鼠标出去了');}

操作元素

获取、修改元素内容

		<div>hello</div>// 先选中 divlet div = document.querySelector('div');// 获取元素里的内容console.log(div.innerHTML);// 还可以通过给innerHTML属性赋值, 来起到修改的作用. div.onclick = function() {// 这里赋值, 不仅仅能够赋值文本, 还可以赋值一个 html 片段. div.innerHTML = '修改元素内容';}

注：使用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';}

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

获取、修改表单元素属性：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 = '播放';}}

获取、修改样式属性

直接修改样式：行内样式

		<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";}

通过修改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 错误!');}}

新增节点

		<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);

删除节点

		<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);