JavaScript API知识笔记 第一天
一、Web API基本认知
补充：
变量声明
const 优先
原因：
const 语义化更好
很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
实际开发中也是，比如react框架，基本const
const声明变量时需要对其进行初始化，其声明的变量存的不是值，而是地址
建议数组和对象使用 const 来声明
1.作用和分类
作用：
使用 JS 去操作 html 和浏览器
分类：
DOM (文档对象模型)、BOM（浏览器对象模型）
2.什么是DOM
DOM（Document Object Model——文档对象模型），是浏览器提供的一套专门用来 操作网页内容 的功能
3.DOM树
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
作用：文档树直观的体现了标签与标签之间的关系
4.DOM对象（重要）
DOM对象：浏览器根据html标签生成的 JS对象
·所有的标签属性都可以在这个对象上面找到
·修改这个对象的属性会自动映射到标签身上
DOM的核心思想：把网页内容当做对象来处理
document 对象是 DOM 里提供的一个对象，网页内的区域都是document
二、获取DOM对象
1.根据css选择器来获取DOM元素
选择匹配第一个元素
语法：
document.querySelector('css选择器')
↑便是我们常见的获取元素
返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。
选择匹配多个元素
语法：
document.querySelectorAll('css选择器')
返回值：返回的是一个对象集合，Nodelist。
所得到的是一个伪数组，即有长度有索引号的数组，但无法使用相关的数组方法。使用时需要使用遍历的方法。
案例
请控制台依次输出 3个 li 的 DOM对象
<ul class="nav">
<li>我的首页</li>
<li>产品介绍</li>
<li>联系方式</li>
</ul>
let li1 = document.querySelector('.nav li:first-child')
let li2 = document.querySelector('.nav li:nth-child(2)')
let li3 = document.querySelector('.nav li:last-child')
console.log(li1)
console.log(li2)
console.log(li3)
2.其他获取DOM元素方法（了解——基本没用到）
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
三、操作元素内容
1.元素innerText属性
将纯文本内容添加/更新到任意标签位置，不解析标签。
const info=document.querySelector('.info')
info.innerText='xxxxx'
2.元素innerHTML属性（正常都是使用这个）
将文本内容添加/更新到任意标签位置，会解析标签，可以使用模板字符串。
const info=document.querySelector('.info')
info.innerHTML=`xxx,<strong>xxx</strong>`
四、操作元素属性
1.操作元素常用属性
常见属性：href、title、src
语法：
对象.属性=值
const pic=document.querySelector('img')
img.title='xxx'
2.操作元素样式属性
（1)通过style属性操作css
语法：
对象.style.样式属性=值
eg：
const box=document.querySelector('.box')
box.style.width='200px'
如果属性名有-连接符，需要转换为小驼峰命名法，并且赋值时，需要时记得加css单位
（2）操作类名操作CSS
语法：
元素.className='active' //active是一个css类名
直接使用className赋值会覆盖以前的类名
（3)通过 classList 操作类控制CSS
语法：
//追加
元素.classList.add('')
//删除
元素.classList.remove('')
//切换
元素.classList.toggle('')
classList追加和删除不影响以前的类名
案例
// 1. 初始数据
const sliderData = [
{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
]
const num = parseInt(Math.random() * sliderData.length)
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const bac = document.querySelector('.slider-footer')
img.src = sliderData[num].url
p.innerHTML = sliderData[num].title
bac.style.backgroudColor = sliderData[num].color
const li = document.querySelector(.slider-indicator li:nth-child(${num + 1}))
document.querySelector('.active').classList.remove('active')
li.classList.add('active')
3.操作表单元素属性
获取&设置：
DOM对象.属性名
DOM对象.属性名=新值
eg：
表单.value='用户名'
表单.type='password'
more：disabled（禁用）、checked（打勾）、selected（选中）
4.自定义属性（后面会经常使用）
eg：
<div data-id="10"><div>
box.dataset.id
五、定时器-间歇函数
开启定时器
语法：
setInterval(函数，间隔时间) //此处为回调函数，即先运行间隔时间后再运行函数
作用：每个你所规定的时间调用一次函数
间隔时间的单位是毫秒
注意：定时器返回的是一个id数字
关闭定时器
语法：
let 变量名=setInterval(函数,间隔时间) clearInterval(变量名)
案例
阅读注册协议
需求：按钮60秒之后才可以使用
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
const btn = document.querySelector('.btn')
let t = 5
const time = setInterval(function () {
t--
btn.innerHTML = `我已经阅读用户协议(${t})`
if (t === 0) {
btn.innerHTML = '同意'
btn.disabled = false
clearInterval(time)
}
}, 1000)
</script>
</body>
