web Api基本认知
作用：通过JS去操作html页面和浏览器(实现浏览器中的某些功能)
分类：
DOM(网页)：Document Object Model(文档对象模型)
BOM(浏览器)：Borwser Object Model(浏览器对象模型)
DOM
DOM树
将网页中标签的关系以树状结构表现出来
DOM对象
浏览器根据html标签生成的JS对象
a)所有的标签属性都可以在这个对象上面找到
b)修改这个对象的属性会自动映射到标签身上
DOM核心思想：把网页内容当做对象来处理
document对象
a)是DOM里提供的一个对象
b)它提供的属性和方法都是用来访问和操作网页内容的
c)网页所有内容都在document里面
获取DOM对象
querySelector(‘选择器’)
<div>
<ul>
<li></li>
</ul>
</div>
<script>
//获取页面中的标签语法：
//a) document.querySelector('CSS选择器') //注意，参数就是一个字符串，字符串就是各种css选择器
let res = document.querySelector('div')
// b)有返回值：返回的结果就是当前标签(标签对象)
console.log(res)
let res2 = document.querySelector(' div ul li') //通过后代选择器获取了li标签
console.log(res2)
</script>
querySelectorAll
<div>文字1</div>
<div>文字2</div>
<div>文字3</div>
<div>文字4</div>
<script>
let res = document.querySelector('div') //querySelector只能获取满足条件的第一个标签
console.log(res)
//document.querySelectorAll('css选择器') //可以获取到所有满足条件的标签 #id .class是css选择器
let res2 = document.querySelectorAll('div') //得到的是一个伪数组(伪数组也是一个数组，但是不能使用数组方法)
console.log(res2) //数组中每一个值都是标签对象
console.log(res2[1])
</script>
如何界定返回的结果是伪数组呢？如果返回的结果没有Array就是伪数组
伪数组不能使用数组中的方法，但是伪数组依然可以使用for循环遍历，因为for循环不是数组中的方法
其他获取DOM元素的方法(了解)
<div id="one" class="test1">文字1</div>
<div id="two" class="test2">文字2</div>
<div id="three">文字3</div>
<div class="test1">文字4</div>
<script>
// 1.其他方式获取标签
// a)通过标签的id获取标签对象
// 总结：因为标签的id唯一，所以通过getElementById()只能获取一个标签
const div = document.getElementById('one')
console.log(div)
//b)通过标签的名字获取标签对象
// document.getElementsByTagName('标签名')
console.log(document.getElementsByTagName('div')) //得到一个伪数组
// c)通过标签类名获取标签
// document.getElementsByClassName('类名')//类名前面不能加点，加点就变成了类选择器
let res = document.getElementsByClassName('test1')
console.log(res)
</script>
操作元素内容
获取标签中的内容
<div id="one" class="test1">
<p>文字1</p>
</div>
<div id="two" class="test2">文字2</div>
<div id="three">文字3</div>
<div class="test1">文字4</div>
<div id="five"></div>
<script>
//获取标签中的内容
// 赋值语法：
// DOM标签对象.innerHTML=值
// DOM标签对象.innerText=值
//获取值语法：获取标签中的内容
// DOM标签对象.innerHTML;
// DOM标签对象.innerText;
const div = document.querySelector('#one')
// 二者的区别：
//a) 如果标签内只有纯粹的文字，则innerHTML和innerText没有任何区别
// b)如果标签中有文字+html标签，则innerHTML既可以获取文字也可以获取对应的HTML标签
console.log(div.innerHTML)
console.log(div.innerText)
//给标签设置文字内容，会覆盖掉标签内原来的内容
div.innerHTML = '呵呵呵呵'
console.log(div.innerHTML) //非纯文本标签也覆盖掉了
div.innerHTML = '<h1>呵呵呵呵</h1>' //innerHTML中的标签页会被渲染上去，而innerText的标签会被当成纯文本渲染
</script>
操作元素属性
操作img的src属性
<img src="../image/1.jpg" alt="">
<script>
// 操作图片标签中的src属性
// a)获取图片的src属性
// 语法：DOM标签对象.src
const img = document.querySelector('img')
let res = img.src //获得的是绝对路径
console.log(res)
// b)给图片标签设置src属性
// 语法：DOM标签对象.src=值;
img.src = '../image/2.jpg'
操作标签的样式属性
<div>
</div>
<script>
//操作标签的样式属性
//1.行内式 //本质上通过操作标签的style属性实现
//2.外联式 //本质都是通过选择器实现的
//3.内嵌式 //本质都是通过选择器实现的
//通过操作标签的style属性实现给标签设置样式的
//语法：DOM标签对象.style.css属性=值
let div = document.querySelector('div')
div.style.backgroundColor = 'red'
div.style.border = '2px solid blue'
//通过行内样式一次可以给标签加若干标签属性，单独设置即可
//style也是一个对象。那么style中有哪些属性我们才可以用 。可以通过console.log(div.style)查阅
</script>
操作标签的类样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
background-color: red;
border: 5px solid blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
</div>
<script>
// 1.操作标签的类样式
// 语法：DOM标签对象.className='类名'
// 代码演示
// 1.定义一个样式
// 2.获取div标签
let div = document.querySelector('div')
// 3.给div标签设置类样式
div.className = 'box'
// 通过className操作标签样式总结
// a)如何给标签添加多个类名？只要在类命中加上空格 div.className = 'box bd w'
//b）通过className操作标签类名的时候，会覆盖标签原来的类名
//c)如果不希望覆盖原来的类名，将原来的类名再次添加
//d)className设置的值必须是类名，不能加点
//操作类样式终级写法(推荐写法)：
//添加类名：DOM标签对象.classList.add('类名')；//不会覆盖原来的类名
//删除类名：DOM标签对象.classList.remove('类名')
//切换类名：DOM标签对象.classList.toggle('类名')
//类似开关，如果没有点击加上，如果有该类名，点击删除
//判断是否包含类名：DOM标签对象.classList.contains('类名')
</script>
</body>
</html>
操作表单元素属性
<input type="text" value="呵呵">
<input type="button" value="注册">
<script>
// 1.操作表单元素中的属性
// a)获取表单元素的内容:DOM表单标签对象.value
// b)设置表单元素的内容：DOM表单标签对象.value
// 代码演示：
let input = document.querySelector('input')
let res = input.value
console.log(res)
input.value = 'hahahah'
// 通过属性选择器找到标签对象
let btn = document.querySelector('input[type="button"]')
btn.value = "zhuce"
</script>
操作复选框的元素属性
<input type="checkbox">
<script>
// 1.操作复选框的选中状态
// a)获取当前复选框的选中状态：DOM标签对象.checked
// 总结：如果得到的结果是true，代表当前复选框是选中状态，否则是非选中状态
// b)设置当前复选框的选中状态：DOM标签对象.checked=布尔值
// 代码演示：
let ck = document.querySelector('input')
ck.checked = true
</script>
操作按钮disabled属性
<input type="button" value="按钮">
<script>
// 操作按钮是否可以点击
// a)获取按钮的一个点击状态：DOM对象.disabled
// 总结：如果获取的结果是false，代表当前是可点击的，如果是true，代表当前按钮是不可点击的
// b)设置按钮的点击状态：DOM对象.disabled=布尔值
let btn = document.querySelector('input')
console.log(btn.disabled)
</script>
自定义属性
应用：Ajax阶段操作数据，根据数据渲染页面时使用
标准属性(内置属性)：标签自带的属性
自定义属性：程序员自己给标签定义的一个属性
<div></div>
<script>
// 自定义属性基本操作方式
// 1.可以直接在标签上加自定义属性或者通过js的方式给标签加自定义属性
// a)如果直接给标签设置自定义属性，html5规范中：要求自定义属性必须以 data-属性名
// b)通过js的方式给标签设置自定义属性：DOM标签对象.dataset.属性名=值；
let div = document.querySelector('div')
div.dataset.mygender = '男'
console.log(div)
// 2.如何获取标签上的自定义属性
// 语法:DOM标签对象.dataset.属性名
console.log(div.dataset.mygender)
</script>
定时器-间歇函数
<div></div>
<script>
// 定时器(间歇函数)
// 特点：隔一段时间执行一次(时间间隔是可以自己控制的)
// 应用场景：网页中的倒计时。轮播图 注册协议.......
// 定时器的一个使用：本质是一个函数，函数会自己隔一段时间调用自己，不需要手动调用
// 语法：
// setInterval(function(){},时间间隔)
// 注意：时间间隔的单位是毫秒
let i = 0
// 开启定时器
let id = setInterval(function () {
i++
document.write(`${i},`)
}, 1000);
console.log(id)
// 停止定时器
//语法： clearInterval(定时器ID)
// 注意：停止定时器的时候，定时器id是不能随便定义的，定时器id必须通过定时器返回值获得
</script>
![[Java、Android面试]_02_HashMap的原理](https://img-blog.csdnimg.cn/direct/5b1318cc44aa4d1d87fab17497120e2a.png#pic_center)
