Web API
一、Web API基本认知
1、作用: 就是使用 JS 去操作 html 和浏览器 2、分类：DOM (文档对象模型)、BOM（浏览器对象模型）
3、什么是DOM
（一）DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API （二）DOM是浏览器提供的一套专门用来 操作网页内容 的功能 作用：开发网页内容特效和实现用户交互
（三）DOM树： 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用：文档树直观的体现了标签与标签之间的关系
! （四）DOM对象（重要） 1.DOM对象：浏览器根据html标签生成的 JS对象 ①所有的标签属性都可以在这个对象上面找到 ②修改这个对象的属性会自动映射到标签身上 2.DOM的核心思想：把网页内容当做对象来处理 3.document 对象 ①是 DOM 里提供的一个对象 ②所以它提供的属性和方法都是用来访问和操作网页内容的 例：document.write() ③网页所有内容都在document里面
二、获取DOM对象
1.选择匹配的第一个元素
document.querySelector("选择器就是指学习过css选择器")
<body>
<h2></h2>
<script>
document.querySelector('h2')
</script>
</body>
返回值： CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。
2.选择匹配的多个元素
document.querySelectorAll('css选择器')
<body>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<script>
// 获取所有的li标签 返回一个数组
document.querySelectorAll('li')
</script>
</body>
注意：querySelectorAll 不管你的选择器写对与否，返回值都是数组 ，数组就可以和循环搭配
三、设置/修改DOM元素内容
如果想要修改标签元素的里面的内容，则可以使用如下几种方式： 1.document.write() 方法：只能在body标签的中写，功能小 2.对象.innerText 属性：只能设置文本，不能解析 html字符串 3.对象.innerHTML 属性：可以设置文本 也可以解析html字符串
四、设置/修改DOM元素属性
1.设置/修改元素常用属性 对象.属性=值
<img src="./images/1.jpg" title="有惊喜" alt="" />
// 修改图片的src
imgDom.src="./images/2.jpg";
// 动态修改 title属性
imgDom.title="没惊喜";
2.设置/修改元素样式属性 ①通过 style 属性操作CSS：对象.style.样式属性=值
<body>
<div>普通的元素</div>
<script>
// 1 获取dom元素
let div = document.querySelector('div');
// 2 开始修改
div.style.fontSize="100px";
div.style.color="yellow";
div.style.backgroundColor="pink";
div.style.height="300px";
div.style.width="400px";
//属性有-连接符，需要转换为小驼峰命名法
</script>
②操作类名(classlist) 操作CSS：
<script>
// 追加一个类
元素.classlist.add('类名')
// 删除一个类
元素.classlist.remove('类名')
//切换一个类（如果本来有，那我就移除 ， 如果本来没有，那我就添加）
元素.classlist.toggle('类名')
</script>
3.className
<body>
<div ></div>
<script>
/*
className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
如果想要同时设置多个 class 以空格做分割即可
*/
// js的方式来动态添加上这个class
let div = document.querySelector('div');
// 通过 className 来设置类名即可
// 同时设置两个类上去
div.className = 'box redCls';
</script>
</body>
4.设置/修改 表单元素 属性 获取: DOM对象.属性名 设置: DOM对象.属性名 = 新值
<script>
表单.value='用户名'
表单.type='password'
1 设置普通的输入框 input.value ="表单的值"
2 设置 按钮的禁用
button.disabled=true 禁用
button.disabled=false 启用
3 设置单选框或者复选框
radio.checked=true 选中
checkbox.checked=false 取消选中
4 设置下拉列表 select
option.selected=true 选中
</script>
五、定时器-间歇函数
1.开启定时器
<script>
setInterval(函数,间隔时间)
</script>
<script>
function repeat() {
console.log('你好啊')
}
每隔一秒调用repeat函数
setInterval(repeat,1000)
</script>
2.关闭定时器
<script>
let 变量名 =setInterval(函数，间隔时间)
clearInterval(变量名)
</script>
给自己补充
随机数和修改样式的简写
<body>
<div>要记住我</div>
<script>
let color=['yellow','green','red','pine','blue']
方法1
function arr(min,max) {
return Math.round(Math.random()*(max-min)+min)
}
let index=arr(0,color.length-1)
// 方法2 简写
// let index=Math.round(Math.random()*4)
// 方法1
// let div=document.querySelector('div')
// div.style.background=color[index]
// 方法2 简写
document.querySelector('div').style.backgroundColor=color[index]
</script>
</body>
