1. WEB APIs(API 接口、方法 )
操作网页文档或者浏览器的接口
DOM 操作文档接口
BOM 操作浏览器接口
2.const声明
<script>
// 数组和对象使用const声明
const arr = ['red','pink']
arr.push('red')//追加元素不会报错
arr = []//重新给数组赋值会把原来的覆盖掉，报错
console.log(arr);
</script>
<script>
// 下列情况用let声明
// 1.如果基本数据类型的值或者引用类型的地址发生变化的时候，用let
// 2.比如 一个变量进行加减运算，比如for循环中的i++
</script>
3.DOM对象
DOM（页面文档对象模型）
DOM的核心就是把文档当做对象来处理，对象里面包含属性和方法，文档当做对象，其实就是操作文档里的对象和方法来操作网页，可以开发内容特效和实现用户交互
document就是DOM里提供的一个对象，网页所有内容都在document里面，，指的是整个文档
4.获取DOM元素
DOM树（每一个标签就是一个节点，一个对象）
将html文档以树状图的形式展现出来
作用：直观的体现了标签与标签之间的关系（节点与节点之间的关系）
标签对应的节点：1.标签对应的节点：元素节点 2.文本：文本节点 3.属性.属性节点
通过css选择器方式获取DOM元素
1.选择匹配的第一个元素
语法：
document.querSelector('css选择器')
参数：包含一个或多个有效的css选择器 字符串
** 返回值：CSS选择器匹配的是第一个元素，一个HTMLElement对象 如果没有选到的话，就得到null**
const aa = document.querySelector('.aa')
const nav = document.querySelector('.nav')
console.log(box)
console.log(aa)
console.log(nav)
const li = document.querySelector('ul li:first-child')
console.log(li)
2.选择匹配多个元素
语法：
document.querSelectorAll('css选择器')
参数：包含一个或多个有效的CSS选择器 字符串
**返回值：CSS选择器匹配的NodeList对象集合(获取的是伪数组)**
const lis = document.querySelectorAll('ul li')
console.log(lis)//得到一个伪数组
3.querySelectorAll，得到的是一个伪数组：
注意：哪怕只有一个元素 querySelectorAll获取过来的也是一个数组
1.有长度有索引号的数组
2.但是没有pop() push()等数组方法
3.数组不能直接操作里面的元素
想要得到里面的每一个元素，则需要遍历（for）的方式获得
for(let i = 0;i < nav1.length;i++){
console.log(nav1[i])//遍历获得每一个小li对象
}
4.特殊的
获取body
const body = document.body
console.log(body);
获取html
const html = document.documentElement
console.log(html);
5.操作元素内容（获取元素的文本更换内容）
1.innerText()
获取：元素.innerText
设置：元素.innerText = '我是一个盒子'
只识别文本
2.innerHTML()
获取：元素.innnerHTML
设置：元素.innnerHTML = '我是时候'
文本标签都可以识别
const box = document.querySelector('.box')
// 2.只识别文本 对象.innerText 属性
console.log(box.innerText)//获取文字内容
console.log(box.innerText = '<h1>11</h1>')
box.innerText = '我是一个盒子'//修改文字内容，不解析标签
console.log(box.innerText)//获取文字内容
// 3.识别文本和标签 对象.innerHTML属性
console.log(box.innerHTML)//获取文字内容
box.innerHTML= `<strong>更换文字</strong>`
随机抽奖案例
选出一等奖，二等奖，三等奖
<style>
.wrapper {
width: 840px;
height: 420px;
background: url(./06-素材/images/bg01.jpg) no-repeat center / cover;
padding: 100px 250px;
box-sizing: border-box;
}
</style>
<div class="wrapper">
<strong>传智教育年会抽奖</strong>
<h1>一等奖：<span id="one">???</span></h1>
<h3>二等奖：<span id="two">???</span></h3>
<h5>三等奖：<span id="three">???</span></h5>
</div>
<script>
//声明数组
let arr = ['周星驰','刘德华','孙尚香','常常常','周周','狗李']
//一等奖
// 获取一个随机数组的下标
let random = Math.floor(Math.random()*arr.length)
// 获取one元素
let one = document.querySelector('#one')
// 将随机的数组元素赋值给one
one.innerHTML = arr[random]
// 删除此元素
arr.splice(random,1)
// 打印数组
console.log(arr)
//二等奖
// 获取一个随机的数组下边,此时数组里面已经没有了one那个元素
let random1 = Math.floor(Math.random()*arr.length)
// 获取two元素
let two = document.querySelector('#two')
// 将随机的元素赋值给two
two.innerHTML = arr[random1]
// 删除此元素
arr.splice(random1,1)
// 打印剩余元素
console.log(arr)
//三等奖
// 获取一个随机的数组下边,此时数组里面已经没有了one那个元素
let random2 = Math.floor(Math.random()*arr.length)
// 获取three元素
let three = document.querySelector('#three')
// 将随机的元素赋值给two
three.innerHTML = arr[random2]
// 删除此元素
arr.splice(random2,1)
// 打印剩余元素
console.log(arr)
</script>
</body>
6.操作元素属性
1.操作元素常用属性
// 标签自带的属性 ； 固有属性，常用属性
// 样式 ：样式属性
// 自定义属性
语法：元素.属性 = 值
// 标签自带的属性 ； 固有属性，常用属性
// 样式 ：样式属性
// 自定义属性
/*
语法：
元素.属性 = 值
*/
// 1.获取图片元素
const img1 = document.querySelector('img')
// 2.操作元素属性，（修改图片对象的属性）（给元素换图，本质就是改变图片的属性值）
img1.src = './06-素材/images/2.webp'
img1.title = 'pink老师'
随机更换图片案例
<img src="./06-素材/images/1.webp" alt="">
<script>
// // 取到 N-M的随机函数
// function getRandom(N,M){
// return Math.floor(Math.random()*(M-N+1))+N
// }
// 1.获取随机数字
const random = Math.floor(Math.random()*(6-1+1)+1)
// 2.获取元素
const img = document.querySelector('img')
// 3.修改图片路径
img.src = `./06-素材/images/${random}.webp`
</script>
</body>
2.操作元素样式属性
// 1.通过style属性修改(直接加在行内，优先级很高)
// 语法：元素.style.属性 = 值
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="box">11</div>
<script>
// 操作元素样式属性
// 1.通过style属性修改(直接加在行内，优先级很高)
// 语法：元素.style.属性 = 值
// 1.获取元素
const box = document.querySelector('.box')
// 2.修改样式属性 对象.style.样式属性 = ‘值’
box.style.width = '300px'//别忘了跟单位
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid purple'
// 遇到复合型的属性，把-删除，后面的首字母大写
div.style.fontSize = '66px'
div.style.lineHeight = '200px'
</script>
</body>
随机更换背景图片案例
body{
background: url(./06-素材/images/desktop_1.jpg) no-repeat top center/cover;
}
</style>
<script>
// 获取三个0-255的随机数
// 为了简化代码封装函数
function getColor(){
return Math.floor(Math.random()*256)
}
const red = getColor()
const green = getColor()
const blue = getColor()
document.body.style.background = `rgba(${red},${green},${blue})`
// document.body.style.background = `rgba(${red},${green},${blue})`
</script>
</body>
通过类名修改样式
语法：元素.className = '类名'
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.nav{
background-color: red;
}
.box{
background-color: purple;
}
</style>
<body>
<div class="nav"></div>
<script>
/*
语法：
元素.className = 'active'
//active是一个css类名
*/
// 1.获取元素
const div = document.querySelector('div')
// 2.添加类名
div.className = 'nav box'//只有一个值，新值会覆盖旧值
// 3.清除类名
div.className = ''
</script>
</body>
通过classList控制样式
.box{
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: pink;
}
</style>
<div class="box">123</div>
<script>
/*
1.追加一个类
元素.classList.add('类名')
2.删除一个类
元素.classList.remove('类名')
3.切换一个类
元素.classList.toggle('类名')
4.检测是否包含某个类名
元素.classList.contains('类名')
*/
// 通过classList添加
// 1.获取元素
const box = document.querySelector('.box')
// 2.添加类名 修改样式
box.classList.add('active')//两个类都存在
// 3.删除类名
box.classList.remove('active')
// 4.切换类 有就删掉，没有就加上
box.classList.toggle('active')
// 5.检测是否包含某个类名
let re = box.classList.contains('active')
console.log(re);//有就是true,没有就是false
</script>
</body>
7.修改表单元素属性
/*
获取和修改
1.表单.value = '用户名'
2.表单.type = 'text'
*/
/*
const inp = document.querySelector('input')
inp.value = '哇哈哈哈'
*/
<input type="text" value = "电脑">
// 1.获取元素
const uname = document.querySelector('input')
// 2.获取值 获取表单里面的值 用的是 表单.value
console.log(uname.value)
console.log(uname.innerHTML) //innerHTML得不到表单的内容
// 3.设置表单的值
uname.value = '我要买电脑'
console.log(uname.type)//text
uname.type = 'password'
console.log(uname.type)//password
8.修改表单选中和禁用
<!-- disabled :禁用元素 -->
<!-- checked:默认选中 -->
<!-- selected:下拉选中 -->
<input type="checkbox" name="" id="">
<button disabled>点击</button>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="" id = "op">武汉</option>
<option value="">天津</option>
</select>
<script>
// 1.选中
const ipt = document.querySelector('input')
ipt.checked = true
ipt.checked = 'true'//除了空字符串是假，其余全部为真,有隐式转换
</script>
<script>
// 2.禁用
const button = document.querySelector('button')
console.log(button.disabled)//默认false 不禁用
button.disabled = true//禁用按钮 （禁用为true）
</script>
<script>
// 3.下拉选中
const op = document.querySelector('#op')
op.selected = true;
</script>
</body>
9.自定义元素属性
<!-- 自定义属性以data- 开头 -->
<!-- 自定义属性语法：元素.dataset.xxx -->
<div data-sp="1" data-sm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset)
console.log(one.dataset.sp)//1
let two = one.dataset.sp = '娃哈哈'
console.log(two);
</script>
</body>
10.间歇函数
间歇函数-定时器
能够使用定时器函数重复执行代码
1.1 开启定时器 setInterval(函数，间歇时间)
作用：每隔一段时间调用这个函数 间隔时间单位是毫秒
setInterval(function () {
console.log('一秒执行一次');
}, 1000)
function fn() {
console.log('一秒执行一次')
}
setInterval(fn, 1000);//函数名不要加小括号,否则是调用函数
// 定时器返回的是一个id数字
let n = setInterval(fn, 1000)
console.log(n)// 3 id号，第几个定时器
1.2关闭定时器
let 变量名 = setInterval(函数，间隔时间) clearInterval(变量名)
clearInterval(m)
11.轮播图案例
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
<div class="slider">
<div class="slider-wrapper">
<img src="./06-素材/images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [
{ url: './06-素材/images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
{ url: './06-素材/images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
{ url: './06-素材/images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
{ url: './06-素材/images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: './06-素材/images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: './06-素材/images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: './06-素材/images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
{ url: './06-素材/images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
]
// 1.获取图片跟p
const img = document.querySelector('img')
const p = document.querySelector('p')
// 2.开启定时器
let i = 0
setInterval(function(){
i++
// 如果播放到最后一张，从第一张重新开始
if(i >= sliderData.length){
i = 0
}
// 更换图片
img.src = sliderData[i].url
// 更换文字
p.innerHTML = sliderData[i].title
// 小圆点
// 先删除以前的active
document.querySelector('.slider-indicator .active').classList.remove('active')
// 再给每一个轮播的加上新的
document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
},1000)
</script>
</body>
12.陈三石案例
<!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>Document</title>
</head>
<body>
<button class="btn">陈三石出生啦</button>
<script>
const age = document.querySelector('.btn')
age.addEventListener('click',function(){
let year = 0
const n = setInterval(function(){
year++
if(year >0 ){
age.innerHTML = `陈三石${year}岁了`
}
if(year === 18){
clearInterval(n)
age.innerHTML = `陈三石成年啦`
}
},1000)
})
</script>
</body>
</html>
