变量声明
- 变量声明有三个 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>
![[旧日谈]关于Qt的刷新事件频率，以及我们在Qt的框架上做实时的绘制操作时我们该关心什么。](https://img-blog.csdnimg.cn/img_convert/f575f993f3ccf18b4d85d6bc35c33741.gif)
