引言
JS 分成三大部分：
① ECMAScript：语法基础
② DOM API：操作页面结构
③ BOM API：操作浏览器
WebAPI
API：Application Programming Interface ( 应用程序接口 )
所谓的 API 本质上就是一些现成的 函数 / 对象，让开发者直接拿来用，方便开发。
其相当于一个工具箱，只不过开发者用的工具箱数目繁多，功能复杂。
JS-WebAPI 包含了 DOM + BOM.
DOM
DOM：Document Object Model ( 文档对象模型 )
DOM 树形结构，可以看见，DOM 树实际上就是一个 html 文件中的详细信息，本质上 一个 DOM 树就是由一个 html 文件中的所有元素 (标签) 所构成的。
一些基础概念
① 文档：一个页面就是 一个文档，使用 document 表示。
② 元素：页面中一个标签就可以称为 一个元素，使用 element 表示。
③ 节点：网页中所有的内容都可以称为 节点 ( 标签节点、注释节点、文本节点、属性节点等 ). 使用 node 表示。
由于在 JS 中，上面三个概念都是对应一个一个对象，所以 DOM 就称为 文档对象模型。
一、获取元素
1. querySelector 函数
querySelector 函数可以通过 CSS 语法中的选择器，来获取到对应元素 (标签)。要想对元素进行后续操作，获取标签是一个大前提。
而这里接收 querySelector 函数返回的，其实是一个 JS 对象，后续可以使用该对象的 API 方法，对该元素 (标签) 的属性、内容、样式…进行直接修改。
这里的思想就和 MySQL数据库 的思想一样，只有当你选中了某一个数据库，才能对其内部的表进行增删查改。而利用 use 就是大前提。
同样地，这里 querySelector 函数就是大前提。
展示
创建一个 elem 对象来接收 querySelector 函数 所选取的元素 (标签)。
<body> <div class="parent"> <div class="child1">123</div> <div class="child2">456</div> <div class="child3">789</div> </div> <script> //querySelector() 括号中填写 css 语法中的选择器 let elem = document.querySelector('div'); console.log(elem); console.log("-----------------"); let elem2 = document.querySelector('.child2'); console.log(elem2); console.log("-----------------"); let elem3 = document.querySelector('.child5'); console.log(elem3); console.log("-----------------"); </script> </body>
展示结果：
2. querySelectorAll 函数
querySelectorAll 函数可以用来选取全部具有某一类的元素 (标签)，和 querySelector 函数的用法相似。
<body> <div class="parent"> <div class="child1">123</div> <div class="child2">456</div> <div class="child3">789</div> </div> <script> let elem4 = document.querySelectorAll('div'); console.log(elem4); console.log("-----------------"); let elem5 = document.querySelectorAll('.parent'); console.log(elem5); </script> </body>
注意：
querySelectorAll 函数严格地来说，返回的并不是一个数组，而是一个 NodeList，但 NodeList 的主要方法使用起来和数组无太大区别，此外，它本身也是一个对象，所以我们可以称它 “伪数组”。
展示结果：
二、理解事件的概念
JS 要构建动态页面，就需要感知到用户的行为。
用户对于页面的一些操作 ( 点击、选择、修改等操作 ) 都会在浏览器中产生一个个事件，被 JS 获取到，从而进行更复杂的交互操作。
也就是说，事件也是用户和程序之间沟通的桥梁，用户进行了某些操作也会产生一些 “事件” 从而让程序进行一些反应。比方说：鼠标点击、鼠标拖动、按下键盘、滑动屏幕…这些都可以被称为一个事件。
1. 事件的三要素
① 事件源：哪个元素触发的。
② 事件类型：是点击、选中、还是修改。
③ 事件处理程序：进一步如何处理，往往是一个回调函数。
2. 示例
<body> <input type="button" value="点击按钮"> <script> let button = document.querySelector('input'); //回调函数 button.onclick = function () { alert("hello"); } </script> </body>
展示结果：
button 是事件源 ( 用户操作了这个元素 )
click 就是事件的类型 ( 点击事件 )
通过 onclick 属性就能关联到一个具体的事件处理函数，当 button 触发了click事件，就会自动调用 onclick 对应的函数。此外，function 是一个回调函数，我们自己并没有调用这个函数，而是写好了，然后浏览器自动调用。
三、获取 / 修改元素内容
前面的 querySelector 函数可以对获取到某个元素 (标签)，接下来，看看对当前元素内部是怎么进行操作的吧。
1. innerHTML
展示 (1) 获取元素内容
通过 innerHTML ，可以获取到元素内部的内容 ( content )。
在下面程序中，可以获取到元素内部的所有文本内容。
<body> <div class="parent">hello</div> <script> let parent = document.querySelector('.parent'); console.log(parent.innerHTML); </script> </body>
展示结果：
展示 (2) 修改元素内容
通过 innerHTML ，还可以对元素内部的内容进行修改。
<body> <div class="parent"> hello </div> <button>点击按钮, 更改文本</button> <script> let button = document.querySelector('button'); button.onclick = function() { //获取 parent 元素 let parent = document.querySelector('.parent'); //修改 parent 元素 parent.innerHTML = 'world'; } </script> </body>
展示结果：
案例
创建一个 +1 按钮，一个 -1 按钮，一个显示框显示整数，通过两个按钮对整数进行增减。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo5</title> <style> .parent { width: 380px; height: 200px; background-color: gray; /* 整个标签居中 */ margin-left: auto; margin-right: auto; /* 整个标签进行圆角设置 */ border-radius: 20px; } .child { font-size: 70px; color: aquamarine; /* 文本居中 */ text-align: center; } .button { width: 200px; height: 100px; background-color:gray; margin-left: auto; margin-right: auto; /* 弹性布局 */ display: flex; justify-content: space-between; /* 标签垂直居中 */ align-items: center; } .button1, .button2 { width: 80px; height: 40px; font-size: 25px; background-color:white; /* 标签进行圆角设置 */ border-radius: 10px; /* border: none; */ } .button1:hover, .button2:hover { background-color:coral; } </style> </head> <body> <!-- -------------------------------------------- --> <div class="parent"> <div class="child"> 100 </div> <div class="button"> <button class="button1"> + </button> <button class="button2"> - </button> </div> </div> <script> let button1 = document.querySelector('.button1'); button1.onclick = function() { //1. 获取元素 let b1 = document.querySelector('.child'); //2. 取出的元素的内容为字符串类型 let content = b1.innerHTML; //3. 将字符串类型转换成数字类型，再加 1 let result = parseInt(content) + 1; //4. 把结果再写回去 b1.innerHTML = result; } let button2 = document.querySelector('.button2'); button2.onclick = function() { let b2 = document.querySelector('.child'); let content = b2.innerHTML; let result = parseInt(content) - 1; b2.innerHTML = result; } </script> </body> </html>
展示结果：
