学习目标：
可以对元素属性进行操作
可以对元素内容进行设置
可以对元素样式进行设置
1. 变量声明
1.1 var、 let 和 const
变量声明有三个，我们应该用哪个呢？
-
首先 var 先排除，老派写法，问题很多，可以淘汰掉。
-
let or const ？
-
建议：const优先，尽量使用const，原因是：
-
const 语义化更好
-
很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
-
实际开发中也是，比如react框架，基本const
-
-
如果你还在纠结，那么我建议：
-
有了变量先给const，如果发现它后面是要被修改的，再改为let
-
练习：j
请问以下的 可不可以把let 改为 const？
// 测试1
document.write('我叫' + 'wyy')
let uname = 'wyy'
let song = '原来'
document.write(uname + song)
// 测试2
let num1 = +prompt('请输入第一个数值：')
let num2 = +prompt('请输入第二个数值：')
alert(`两者相加的结果是：${num1 + num2}`)
请问以下的 可不可以把let 改为 const？
// 测试1
let num = 1
num = num + 1
console.log(num) // 结果是2
// 测试2
for (let i = 0; i < nums.length; i++) {
document.write(nums[i])
}
请问以下的 可不可以把let 改为 const？
// 测试1
let arr = ['red', 'green']
arr.push('pink')
console.log(arr) // ['red', 'green', 'pink']
// 测试2
let person = {
uname: 'wyy',
age: 18,
gender: '女'
}
person.address = '杭州'
console.log(person)
注意：
-
const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
-
但是对于引用数据类型，const声明的变量，里面存的不是 值，不是值，不是值，是 地址。
测试
// 可以改为 const 吗
let person = {
uname: 'shadow',
age: 18,
gender: '女'
}
person.gender = '男'
console.log(person.gender) // 男
console.log(person)
// 下面写法可以吗？
const names = []
names = [1, 2, 3]
const obj = {}
obj = {
uname: 'shadow'
}
总结：
-
以后声明变量我们优先使用哪个？
-
为什么const声明的对象可以修改里面的属性？
-
什么时候使用let声明变量？
2. Web API 基本认知
2.1 作用和分类
-
作用: 就是使用 JS 去操作 html 和浏览器
-
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
2.2 什么是DOM
-
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
-
简单理解：DOM是一个对象，用来操作网页的。
-
例如：改变网页内容、样式等。
-
2.3 总结：
-
Web API阶段我们学习哪两部分？
-
DOM是什么？有什么作用？
2.4 DOM树
-
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
-
作用：文档树直观的体现了标签与标签之间的关系
节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
-
【元素节点】其实就是 HTML 标签，如上图中
head、div、body等都属于元素节点。 -
【属性节点】是指 HTML 标签中的属性，如上图中
a标签的href属性、div标签的class属性。 -
【文本节点】是指 HTML 标签的文字内容，如
title标签中的文字。
2.5 DOM对象
-
DOM对象：浏览器根据html标签生成的 JS对象
-
所有的标签属性都可以在这个对象上面找到
-
修改这个对象的属性会自动映射到标签身上
-
-
DOM的核心思想
-
把网页内容当做对象来处理
-
-
document 对象
-
是 DOM 里提供的一个对象
-
网页所有内容都在document里面
-
2.6 总结
-
DOM 树是什么？
-
DOM对象怎么创建的？
-
document 是什么？
3. 获取DOM对象
-
根据CSS选择器来获取DOM元素 (重点)
-
其他获取DOM元素方法（了解）
思考：我们想要操作某个标签首先做什么？
3.1 根据CSS选择器来获取DOM元素 (重点)
3.1.1 选择匹配的第一个元素
// 语法
document.querySelector('css选择器')
// 参数 包含一个或多个有效的CSS选择器 字符串
// 返回值 匹配的第一个元素,如果没有匹配到，则返回null
// 示例
document.querySelector('#box div')
3.1.2 选择匹配的多个元素
// 语法
document.querySelectorAll('css选择器')
// 参数 包含一个或多个有效的CSS选择器 字符串
// 返回值 元素对象集合
// 示例
document.querySelectorAll('ul li')
3.1.3 总结
-
获取一个DOM元素我们使用谁？
-
获取多个DOM元素我们使用谁？能直接修改吗？ 如果不能可以怎么做到修改?
3.1.5 注意
-
document.querySelectorAll('css选择器')得到的是一个伪数组-
有长度有索引号
-
但是没有数组的方法，如push()，pop()
-
想要得到里面的每一个元素对象，需要遍历。
-
3.2 总结
-
获取页面中的标签我们最终常用那两种方式？
-
他们两者的区别是什么？
-
他们两者小括号里面的参数有神马注意事项？
-
里面写的是css选择器
-
必须是字符串
-
3.3 其它获取DOM元素的方法（了解）
// 根据id获取一个元素对象
document.getElementById('id')
// 根据 标签名 获取多个元素对象
document.getElementsByTagName('tagName')
// 根据 类名 获取多个元素对象
document.getElementsByClassName('className')
4. 操作元素内容
-
元素对象.innerText 属性
-
元素对象.innerHTML 属性
4.1 元素.innerText 属性
获取或设置标签内容
示例：
const box = document.querySelector('.box')
console.log(box.innerText) // 获取文字内容
box.innerText = '我是一个盒子' // 修改文字内容
注意：不识别 html 标签
4.2 元素.innerHTML 属性
获取或设置标签内容
示例：
const box = document.querySelector('.box')
console.log(box.innerHTML) // 获取标签内容
box.innerHTML = '<strong>我要更换</strong>' // 设置标签内容
注意：识别 html 标签
4.3 总结
-
设置/修改DOM元素内容有哪2种方式？
-
二者的区别是什么？
4.4 年会抽奖案例
-
需求：从数组随机抽取一等奖、二等奖和三等奖，显示到对应的标签里面。
-
分析
-
声明数组: const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']
-
一等奖:随机生成一个数字（0~数组长度），找到对应数组的名字
-
通过innerText 或者 innerHTML 将名字写入span元素内部
-
二等奖依次类推
-
5. 操作元素属性
5.1 操作元素常用属性
-
通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
-
常见的属性比如： href、title、src 等
-
语法：
元素对象.属性 = 值
示例：
// 1. 获取图片元素
const img = document.querySelector('img')
// 2. 修改图片对象的属性 对象.属性 = 值
img.src = './images/2.webp'
5.1.2 练习 页面刷新，图片随机更换
-
需求：当我们刷新页面，页面中的图片随机显示不同的图片
-
分析：
-
随机显示，则需要用到随机函数
-
更换图片需要用到图片的 src 属性，进行修改
-
核心思路：
-
获取图片元素
-
随机得到图片序号
-
图片.src = 图片随机路径
-
-
5.2 操作元素样式属性
-
可以通过 JS 设置/修改标签元素的样式属性
-
比如通过 轮播图小圆点自动更换颜色样式等
5.2.1 通过 style 属性操作CSS
-
语法：
对象.style.样式属性 = 值
示例：
// 1. 获取元素
const box = document.querySelector('.box')
//2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位
box.style.width = '300px'
// 多组单词的采取 小驼峰命名法
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red'
注意：
-
修改样式通过style属性引出
-
如果属性有-连接符，需要转换为小驼峰命名法
-
赋值的时候，需要的时候不要忘记加css单位
-
bn的是行内样式
案例： 页面刷新，页面随机更换背景图片
-
需求 当我们刷新页面，页面中的背景图片随机显示不同的图片
-
分析：
-
随机函数
-
css页面背景图片 background-image
-
标签选择body， 因为body是唯一的标签，可以直接写 document.body.style
-
// console.log(document.body)
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
// 随机数
const random = getRandom(1, 10)
document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
5.2.2 操作类名(className) 操作CSS
-
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
-
语法：
元素对象.className = 'active'
示例：
// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名 class 是个关键字 我们用 className
div.className = 'nav box'
注意：
-
由于class是关键字, 所以使用className去代替
-
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
5.2.3 总结
-
使用 className 有什么好处？
-
使用 className 有什么注意事项？
5.2.4 通过 classList 操作类控制CSS
-
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
-
语法：
// 追加一个类 元素.classList.add('类名') // 删除一个类 元素.classList.remove('类名') // 切换一个类 元素.classList.toggle('类名')
5.2.5 总结
使用 className 和classList的区别？
-
className修改大量类名的时候更方便 -
classList修改不多类名的时候更方便 -
classList是追加和删除不影响以前类名
5.2.6 轮播图随机版
需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
-
图片会随机变换
-
底部盒子背景颜色和文字内容会变换
-
小圆点随机一个高亮显示
分析：
-
准备一个数组对象，里面包含详细信息
-
随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容
-
利用这个随机数字，让小圆点添加高亮的类（addClass） 利用css 结构伪类选择器
5.3 操作表单元素 属性
-
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
-
正常的有属性有取值的 跟其他的标签属性没有任何区别
-
语法
-
获取： 元素对象.属性名
-
设置： DOM对象.属性名 = 新值
-
示例：
// 1 获取元素
// const uname = document.querySelector('input')
// 2. 获取值 获取表单里面的值 用的 表单.value
// console.log(uname.value) // 电脑
// console.log(uname.innerHTML) innertHTML 得不到表单的内容
// 3. 设置表单的值
// uname.value = '我要买电脑'
// console.log(uname.type)
// uname.type = 'password'
-
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
-
比如： disabled、checked、selected
示例：
// 1. 获取
const ipt = document.querySelector('input')
// console.log(ipt.checked) // false 只接受布尔值
ipt.checked = true
// ipt.checked = 'true' // 会选中，不提倡 有隐式转换
// 1.获取
const button = document.querySelector('button')
// console.log(button.disabled) // 默认false 不禁用
button.disabled = true // 禁用按钮
5.4 自定义属性
-
内置属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
-
自定义属性：
-
在html5中推出来了专门的data-自定义属性
-
在标签上一律以data-开头
-
在DOM对象上一律以dataset对象方式获取
-
6. 定时器-间歇函数
-
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
-
例如：网页中的倒计时
-
要实现这种需求，需要定时器函数
-
定时器函数有两种，今天我先讲间歇函数
6.1 定时器函数基本使用
6.1.1 开启定时器
-
setInterval(函数名, 间隔时间) 函数名不要加小括号
示例：
setInterval(function () {
console.log('一秒执行一次')
}, 1000)
注意：
-
函数名字不需要加括号
-
定时器返回的是一个数字，作为定时器的 ID
6.1.2 关闭定时器
-
clearInterval(定时器ID)
示例：
let m = setInterval(function () {
console.log(11)
}, 2000)
console.log(m)
6.1.3 总结
-
定时器函数有什么作用？
-
定时器函数如何开启？
-
定时器函数如何关闭？
6.2 案例 阅读注册协议
需求：按钮60秒之后才可以使用
分析：
-
开始先把按钮禁用（disabled 属性）
-
一定要获取元素
-
函数内处理逻辑
-
秒数开始减减
-
按钮里面的文字跟着一起变化
-
如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
-
7. 综合案例 轮播图定时器版
需求：每隔一秒钟切换一个图片
分析：
-
准备一个数组对象，里面包含详细信息
-
获取元素
-
设置定时器函数
-
设置一个变量++
-
找到变量对应的对象
-
更改图片、文字信息
-
激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
-
-
处理图片自动复原从头播放（放到变量++后面，紧挨）
-
如果图片播放到最后一张， 就是大于等于数组的长度，则把变量重置为0
-
