变量声明
变量声明有三个 var let 和 const建议： const 优先，尽量使用const，原因是： Ø const 语义化更好Ø 很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？Ø 实际开发中也是，比如react框架，基本const什么时候使用let声明变量？
Ø 如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let Ø 比如 一个变量进行加减运算，比如 for循环中的 i++
1. Web API作用和分类
l. 作用: 就是使用 JS 去操作 html 和浏览器2.分类：DOM (文档对象模型)、BOM（浏览器对象模型）2. 什么是DOM
DOM（Document Object Model——文档对象模型）是用来呈现以及与任HTML 或 XML文档交互的API白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能DOM作用:开发网页内容特效和实现用户交互2.1获取DOM元素练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; } </style></head><body> <!-- html标签 盒子 --> <div class="box">666</div> <div class="top"> <ul> <li>123</li> <li>456</li> <li>789</li> <li>173</li> <li>643</li> </ul> </div> <script>// querySelector 查询选择器 // 获取DOM元素 //选择匹配第一个元素: document.querySelecto const box1 = document.querySelector('.box') // 参数：包含一个或多个有效的css选择器字符串 // 返回值：css选择器匹配的第一个元素，一个对象 console.log(box1); // 选择匹配多个元素 document.querySelectorAll const top1 = document.querySelectorAll('.top ul li') // 一定记得打印 打印出数组 对象集合 console.log(top1); </script></body></html>3.DOM树是什么
Ø 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树Ø 描述网页内容关系的名词Ø 作用：文档树直观的体现了标签与标签之间的关系3.1 依次获取DOM对象练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul class="nav"> <li>你好</li> <li>我是</li> <li>Superman</li> </ul> <script> // 第一种方法 // 伪类选择器 // first-child ：获取的第一行元素 // nth-child(2)：第二行元素，括号里写几就是第几行，也可以用2n等来表示 // last-child：最后一行元素 // const nav1 = document.querySelector('.nav li:first-child') // console.log(nav1); // const nav2 = document.querySelector('.nav li:nth-child(2)') // console.log(nav2); // const nav3 = document.querySelector('.nav li:last-child') // console.log(nav3); // 第二种方法 // 可以用循环输出每个元素 for循环 // 获取所有元素，再循环输出 const nav1 = document.querySelectorAll('.nav li') // 伪数组，所以有数组长度，就是获取 对象名.length for (let i = 0; i < nav1.length; i++) { console.log(nav1[i]); //每个小li } </script></body></html>4.document 是什么？
Ø 是 DOM 里提供的一个对象Ø 网页所有内容都在document里面2. 根据CSS选择器来获取DOM元素 (重点)
选择匹配的第一个元素
语法：document.querySelector('css选择器')
参数:包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。选择器匹配多个元素
语法：document.querySelectorAll('css选择器')
参数:包含一个或多个有效的CSS选择器 字符串
返回值：css选择器匹配的NodeList 对象集合
获取一个DOM元素我们使用谁？能直接操作修改吗?
Ø querySelector() Ø 可以 2. 获取多个DOM元素我们使用谁？能直接修改吗？ 如果不能可以怎么做到修改 ？ Ø querySelectorAll() Ø 不可以， 只能通过遍历的方式一次给里面的元素做修改
1.设置/修改DOM元素内容有哪2钟方式？
Ø 元素.innerText 属性Ø 元素.innerHTML 属性1.1操作元素内容，修改元素练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="box">想要修改的内容</div> <div class="first">可以解析标签</div> <script> // 第一步：获取元素 const box1 = document.querySelector('.box') console.log(box1); // 修改内容 对象.innerText 显示存文本，不解析标签 console.log(box1.innerText ); //获取要修改的文字内容 box1.innerText = '哈哈' // 第一步：获取元素 对象.innerHTML 会解析标签，多标签建议使用模版字符 const first1 = document.querySelector('.first') first1.innerHTML='<strong>我能修改标签</strong>' </script></body></html>2. 两者者的区别是什么？
Ø 元素.innerText 属性 只识别文本，不能解析标签Ø 元素.innerHTML 属性 能识别文本，能够解析标签
抽奖练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .all{ width: 500px; height: 300px; border:1px solid rgb(245, 131, 150); } .one{ color:red; } .two{ color: blue; } .three{ color: green; } </style></head><body> <div class="all"> <h1>幸福小区业主抽奖活动</h1> <h2><span class="one">一等奖：？</span></h2> <h3><span class="two">二等奖：？</span></h3> <h4><span class="three">三等奖：？</span></h4> </div> <script> // 创建一个数组储存 const arr = [ '张三', '李四', '王五', '赵六', '田七'] // 生成数组随机数 let random = Math.floor(Math.random() * arr.length) // 获取对象元素 const one = document.querySelector('.one') one.innerHTML=`一等奖：${arr[random]}` arr.splice(random,1) console.log(arr); // 生成第二个随机数 let random1=Math.floor(Math.random() * arr.length) // 获取对象 const two = document.querySelector('.two') // 对象名.innerHTML='值' 修改内容，修改里面的值 two.innerHTML=`二等奖：${arr[random1]}` // 删除随机数中获取到的元素 arr.splice(random1,1) // 生成第三个随机数 let random2=Math.floor(Math.random() *arr.length) // 获取对象 const three = document.querySelector('.three') three.innerHTML=`三等奖：${arr[random2]}` arr.splice(random2,1)</script> </body></html>