Web APIs
1.Web API 基本认知
1.作用和分类
1.作用: 就是使用 JS 去操作 html 和浏览器
2.分类：DOM (文档对象模型)、BOM（浏览器对象模型）
2.什么是dom
1.DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
2.白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
3.DOM作用
开发网页内容特效和实现用户交互
3.总结
1.Web API阶段我们学习那两部分？
1.DOM
2.BOM
1.DOM 是什么？有什么作用？
1.DOM 是文档对象模型
2.操作网页内容，可以开发网页内容特效和实现用户交互
3.DOM树
1.DOM树是什么
1.将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
2.描述网页内容关系的名词
3.作用：文档树直观的体现了标签与标签之间的关系
4.Dom对象（重点）
1.DOM对象：浏览器根据html标签生成的 JS对象
1.所有的标签属性都可以在这个对象上面找到
2.修改这个对象的属性会自动映射到标签身上
2.DOM的核心思想
1.把网页内容当做对象来处理
3.document 对象
1.是 DOM 里提供的一个对象
2.所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
3.网页所有内容都在document里面
5.总结
1. DOM 树是什么？
1将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
2.作用：文档树直观的体现了标签与标签之间的关系
2. DOM对象怎么创建的？
1.浏览器根据html标签生成的 JS对象（DOM对象）
2.DOM的核心就是把内容当对象来处理
3. document 是什么？
1.是 DOM 里提供的一个对象
2.网页所有内容都在document里面
2.获取DOM对象
1.根据CSS选择器来获取DOM元素 (重点)
1 选择匹配的第一个元素
1.语法：
<script>
document.querySelector ('css选择器')
</script>
2.参数:
包含一个或多个有效的CSS选择器 字符串
3.返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。
2 选择匹配的多个元素
1.语法：
<script>
document.querySelectorAll ('css选择器')
</script>
参数: 包含一个或多个有效的CSS选择器 字符串 返回值： CSS选择器匹配的NodeList 对象集合 例如：
<script>
document.querySelectorAll ('ul li')
</script>
3.思考
1.获取一个DOM元素我们使用谁？
querySelector()
2.获取多个DOM元素我们使用谁？
querySelectorAll()
3.querySelector() 方法获取到的元素能直接操作修改吗？
可以
4.querySelectorAll() 方法获取到的元素能直接修改吗？ 如果不能可以怎么做到修改？
不可以， 只能通过遍历的方式。依次给里面的元素做修改
4.总结
1.获取页面中的标签我们最终常用那两种方式？
querySelectorAll() querySelector()
2. 他们两者的区别是什么？
querySelector() 只能选择一个元素， 可以直接操作 querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
3. 他们两者小括号里面的参数有神马注意事项？
里面写css选择器 必须是字符串，也就是必须加引号
3.设置/修改DOM元素内容
1。如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
学习路径：
1.document.write() 方法
2.对象.innerText 属性
3.对象.innerHTML 属性
2 document.write()
只能将文本内容追加到 前面的位置 文本中包含的标签会被解析
<script>
// 永远都是追加操作，且只能位置在</body>前
document.write()
document.write()
</script>
-
元素innerText 属性
将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> // let lis = document.querySelector('li') let lis = document.querySelectorAll('li') for (let index = 0; index < lis.length; index++) { lis[index] lis[index].innerText = `这个是li标签 ` + index } </script>4.元素.innerHTML 属性
将文本内容添加/更新到任意标签位置 文本中包含的标签会被解析
box.innerHTML = '<h2>你好呀</h2>'5.总结
1. 设置/修改DOM元素内容有哪3钟方式？
1.document.write() 方法
2.元素.innerText 属性
3.元素.innerHTML 属性
2. 三者的区别是什么？
1.document.write() 方法 只能追加到body中
2.元素.innerText 属性 只识别内容，不能解析标签
3.元素.innerHTML 属性 能够解析标签
4.如果还在纠结到底用谁，你可以选择innerHTML
6.案例
1.随机抽取的名字显示
<body> <h1>邀请下面几位，同学去旅游</h1> <h2></h2> <script> let userName = [ '小明', '小红', '小刚', '小花' ]; function getRandom(min, max) { return Math.round(Math.random() * (max - min) + min) } let index = getRandom(0, userName.length - 1) let h2htnl= document.querySelector ('h2') h2htnl.innerText = userName[index] </script>
4.设置/修改DOM元素属性
1..设置/修改DOM元素属性
1.还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
2.最常见的属性比如： href、title、src 等
3.语法：
<script>
对象.属性 = 值
</script>
4.举例
<body>
<img src="" alt="">
<script>
// 获取元素
let pic = document.querySelector ('img')
// 2.操作属性
pic.src = './imgex/1.png'
pic.title = '图片'
</script>
</body>
2.案例页面刷新，图片随机更换
<style>
.d1 {
background: url(./imgex/1.png);
}
.d2 {
background: url(./imgex/2.png);
}
.d3 {
background: url(./imgex/3.png);
}
.d4 {
background: url(./imgex/4.png);
}
</style>
</head>
<body>
<script>
// 添加body的背景图片有两种
// 第一种
/* let pics = [
'./imgex/1.png',
'./imgex/2.png',
'./imgex/3.png',
'./imgex/4.png'
]
let = index = Math.round(Math.random() * (pics.length - 1))
document.body.style.backgroundImage = `url(${pics[index]})` */
// 第二种
let pics = ['d1','d2','d3','d4']
let index =Math.round(Math.random()* (pics.length - 1))
document.body.classList.add(pics[index])
</script>
3.通过 style 属性操作CSS
1.语法：
<script>
对象.style.样式属性 = 值
</script>
2举例
<body>
<div>来改我</div>
<script>
let divDom = document.querySelector('div')
divDom.style.fontSize = '100px'
divDom.style.color = 'pink'
divDom.style.fontWeight = '700'
</script>
4.操作类名(className) 操作CSS
1.如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：
<script>
// activel 是一个css类名
div.className = 'activel'
</script>
2.注意：
由于class是关键字, 所以使用className去代替 className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3.总结
1使用 className 有什么好处？
可以同时修改多个样式
2. 使用 className 有什么注意事项？
直接使用 className 赋值会覆盖以前的类名
5. 通过 classList 操作类控制CSS
1为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
<script>
// 追加一个类
let div = document.querySelector('div')
// classList 添加一个类
div.classList.add('b2', 'c3', 'd4')
// 单独来指定移除一个class
div.classList.remove('b2', 'c3')
// 切换 （如果本来有，那我就移除 ， 如果本来没有 我就添加
div.classList.toggle('d4')
</script>
2.总结
1.使用 className 和classList的区别？
1.修改大量样式的更方便
2.修改不多样式的时候方便
3.classList 是追加和删除不影响以前类名
5.定时器-间歇函数
1.创建定时器
<script>
// 函数 负责 定时执行的业务
/* function repeat() {
console.log('海蜇王');
}
每隔一秒执行一次
时间单位 毫秒 1000毫秒 = 1秒
setInterval (repeat,1000 ) */
// 其他模样的写法
// setInterval(匿名函数，1000)
setInterval(function () {
console.log('海蜇王');
}, 1000);
</script>
2.清除定时器
<script>
// 开启了一个定时器 会返回 定时器id
// 不需要关心 这个定时器的id等于多少， 有id
/* let timeId = setInterval(function () {
console.log('你要去吃晚饭了吗');
}, 1000
);
console.log(timeId);
// 清除定时器 一般都是要根据某个条件来清除的
// clearInterval(timeId) */
// 2.循环三十次 就撤退
let index = 0
// 创建定时器的同时 返回定时器id
let timeId = setInterval(function () {
index++
console.log('开始执行三十就跑', index);
// 判断是否满足条件了
if (index === 30) {
// 清除定时器
clearInterval(timeId)
}
}, 100);
</script>
