Web API 基本认知
作用和分类
作用：就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
什么是DOM
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API，也就是浏览器提供的一套专门用来 操作网页内容 的功能，作用是开发网页内容特效和实现用户交互
DOM树
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，可以让我们更直观的了解标签与标签之间的关系
DOM对象
浏览器根据html标签生成的 JS对象，所有的标签属性都可以在这个对象上面找到，当我们修改这个对象的属性时，会自动映射到标签身上
获取DOM对象
获取单个dom元素
- 语法
document.querySelector('css选择器')
// 只能获取第一个满足条件的标签
// 可以 css选择器 位置填写一个或多个有效的选择器 字符串
- 返回值
如果选择器找不到dom元素，querySelector 只会返回 null
获取多个dom元素
- 语法
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script>
// 语法：document.querySelectorAll 获取所有的li标签，并返回一个数组
let list = document.querySelectorAll('li')
// 打印数组内容
console.log(list);
// 遍历数组
for (let index = 0; index < list.length; index++) {
// list[index] dom 元素
// 文本
list[index].innerText = '这个是' + index
}
</script>
</body>
- 返回值
如果选择器找不到dom元素，querySelectorAll 只会返回 一个空数组
- 思考：querySelectorAll() 方法获取到的元素能直接修改吗？ 如果不能可以怎么做到修改？
不可以， 只能通过遍历的方式。依次给里面的元素做修改
设置/修改DOM元素内容
3种实现在标签中写动态设置文本写法及区别
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script>
/*
1 document.write 只能在body标签中写，作用及功能较弱，只能显示
2 innerText 只能设置文本，不能解析HTML字符串/标签
3 innerHTML 既能设置文本又能解析HTML字符串/标签
*/
document.querySelector('li:nth-child(7)').innerText = '<button>随便改</button>' //原样输出<button>随便改</button>
document.querySelector('li:nth-child(8)').innerHTML = '<button>随便改</button>' //生成按钮
</script>
</body>
设置/修改DOM元素属性
常用属性
通过 JS 设置/修改标签元素属性，比如：href、title、src 等
<body>
<a href="https://www.baidu.com/"></a>
<img src="" alt="">
<script>
// 语法：对象.属性 = '需要修改的值'
// 修改dom元素属性的方式：dom.属性名=属性值
// 这里属性指的是 a标签里面的href img里面的src等等这些
// 获取dom元素
let aDom = document.querySelector('a')
// 修改a标签的属性
aDom.href = 'https://m.weibo.cn/'
</script>
</body>
样式属性
- 通过 style 属性操作CSS
<body>
<p>你过来呀</p>
<script>
// 语法；对象.tyle.css样式属性='属性值'
// 获取dom元素
let p = document.querySelector('p')
// 修改
// 赋值的时候，需要的时候不要忘记加css单位
p.style.fontSize = '100px'
p.style.color = 'red'
// 如果属性有-连接符，需要转换为小驼峰命名法
p.style.fontWeight = '700'
</script>
</body>
- 操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。因为class在JS属于是关键字, 所以要使用className去代替
<style>
.box {
width: 400px;
height: 400px;
margin: 100px auto;
background-color: pink;
}
.top {
border-radius: 50%;
background-color: aqua;
}
</style>
</head>
<div></div>
<body>
<script>
/*
className 的特点
会先清空这个dom的元素 旧的所有的类 然后再添加新的类
如果想要添加多个 class 在两个类名之间用空格隔开即可
*/
//用JS的方式来动态添加这个class
let div = document.querySelector('div')
div.className = 'box top'
</script>
- 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
<style>
.s1 {
height: 500px;
background-color: aqua;
}
.s2 {
width: 800px;
}
.s3 {
background-color: pink;
}
.s4 {
border-radius: 50%;
}
</style>
<body>
<div class="s1"></div>
<script>
// 获取dom元素
let div = document.querySelector('div')
// 添加一个类class
div.classList.add('s2')
// 添加多个类
div.classList.add('s2','s3','s4')
// 单独制定移除一个class
div.classList.remove('s4')
// 切换 如果本来就有，那我就移除，如果本来没有，那我就添加
div.classList.toggle('s3')
</script>
</body>
表单元素属性
什么时候会用到修改表单元素属性？比如，输入密码的时候，输入时隐藏，点击眼睛时显示
语法及使用
<body>
<input type="text" class="username" />
是否同意协定
<input type="checkbox" class="isarg" checked />
<button class="code" disabled>发送验证码</button>
<select class="sel">
<option>去泰国</option>
<option>去非洲</option>
<option>去印度</option>
<option>去啊富汗</option>
</select>
<!-- <textarea> 你好 </textarea> -->
<textarea> </textarea>
<script>
// innerText/HTML 主要用来设置双标签的文本内容
// 获取表单dom元素 类名username
let username = document.querySelector('.username')
// 设置文本内容
// username.innerText = '我的用户名'; 这是无效的
username.value = '我的用户名' //正确写法
// 复选框
let isarg = document.querySelector('.isarg')
isarg.checked = false //表示不选定 true 选定
// 按钮
let code = document.querySelector('.code')
// 设置点击的禁用和启用 disabled
code.disabled = false //表示不禁用
// 下拉菜单 select
let option = document.querySelector('option:nth-child(3)')
// 注意 selected 的单词拼
option.selected = true
// 文本域textarea
// 属于表单元素，又是双标签
let textarea = document.querySelector('textarea')
// 获取文本域中的值
console.log(textarea.value); //输出 <h1>你好</h1>
console.log(textarea.innerText); //无法输出
console.log(textarea.innerHTML); //输出<h1>你好</h1>
// value 和 innerHTML的区别
// value 原样获取内容
// innerHTML 获取的内容如果包含html 会转译代码
</script>
</body>
定时器-间歇函数
定时器函数介绍
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，而不需要我们手动去触发，例如：网页中的倒计时
定时器函数基本使用
- 开启定时器
<body>
<script>
// 通常写法
function name() {
console.log('你的头发多');
}
setInterval(name,2000)
// 常用写法
setInterval(function(){
console.log('头发都没了');
},1000)
</script>
</body>
- 关闭/清楚定时器
一般不会刚创建就停止，而是满足一定条件再停止
<body>
<script>
// 开启了一个定时器会返回定时器ID 这个ID数是随机的 一般情况下不做理会
let timeId = setInterval(function (params) {
console.log('吃饭时间');
},1000)
// 清除定时器，一般需要根据某个条件来清除
clearInterval(timeId)
// 案例练习
let index = 0
let timeId1 = setInterval(function () {
index++
console.log(`跑了${index}圈`);
// 判断是否满足条件
if (index === 20) {
clearInterval(timeId)
}
},100)
</script>
</body>
综合案例
倒计时
<body>
<button></button>
<script>
let tiems = 60
// 获取dom元素
let btn = document.querySelector('button')
setInterval(function () {
// console.log(times);先输出打印看看是否达到我们想要的效果
// 修改button里面的文本内容
btn.innerText = times
times--
// 当times=0的时候 重新设置为60
if (times === -1) {
times = 60
}
},100)
</script>
轮播图
<body>
<img src="" alt="">
<script>
// 声明一个递增递减的变量
let i = 1
// 计时器
setInterval(function () {
// console.log(i);
// 获取dom元素
let img = document.querySelector('img')
// 让src的图片，随着递增而变化
img.src = `./images/b0${i}.jpg`
i++
// 判断条件
if (i === 10) {
// 如果i到了10，就让i倒回1，重新循环
i = 1
}
},1000)
</script>
</body>
