文章目录
- Web API基本认知
- 一、 变量声明
- 二、 DOM
- 1. DOM 树
- 2. DOM对象
- 3. 获取DOM对象
- (1)、选择匹配的第一个元素
- (2)、选择匹配多个元素
- 三、 操作元素
- 1. 操作元素内容
- 2. 操作元素属性
- (1)、常用属性（href之类的）
- (2)、通过style属性操作CSS
- (3)、通过类名(className)操作CSS
- (4)、通过classList操作控制CSS
- (5)、操作表单元素属性
- (6)、自定义属性
- 四、 定时器-间歇函数
- 1. 开启定时器
- 2. 关闭定时器
Web API基本认知
web API包括DOM和BOM
一、 变量声明
建议：const优先，尽量使用const。有了 变量先给const，后面发现是要被修改的，再改为let。
- const 声明的变量的值不能更改，而且const声明变量的时候需要里面进行初始化
- 但是对于引用数据类型，const声明的变量，里面存的不是值，是地址。
什么时候使用let声明变量？
- 如果基本数据类型的值或者引用数据类型的地址发生变化的时候，需要用let
案例一：问以下内容可不可以把let 改为 const？
let num1 = +prompt('输入第一个数值')
let num2 = +prompt('输入第二个数值')
alert(`两者相加的结果是：${num1 + num2}`)
let person = {
uname: 'Tom',
age: 19
}
person.address = '山东'
可以，因为变量的内容没发生变化
案例二：
二、 DOM
DOM–文档对象模型，操作网页内容，实现用户交互
1. DOM 树
HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，直观的体现了标签与标签之间的关系。
2. DOM对象
DOM对象怎么创建的？
- 浏览器根据html标签生成的 JS对象（DOM对象）
- DOM的核心就是把内容当对象来处理
html里的标签，对应到dom树里，是一个个的JS对象。比如div在html里是标签，通过JS获取过来，在dom树里，div是个对象，div不同的属性就是对象的属性。
document对象
- 是 DOM 里提供的一个对象（是dom树里最大的对象）
- 网页所有内容都在document里面
3. 获取DOM对象
根据CSS选择器来获取DOM元素
(1)、选择匹配的第一个元素
document.querySelector('css选择器') //在style里怎么写css选择器，这里就可以怎么填
返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。
(2)、选择匹配多个元素
document.querySelectorAll('css选择器')
返回值：CSS选择器匹配的NodeList 对象集合。得到的一个伪数组，有长度、索引号的数组。但是不能用push等数组方法。
<body>
<!-- 练习： 依次输出3个li的DOM对象 -->
<ul class="nav">
<li>我的首页</li>
<li>产品介绍</li>
<li>联系方式</li>
</ul>
<script>
// 2. 选择匹配的多个元素 querySelectorAll 返回伪数组
const lis = document.querySelectorAll('ol li')
console.log(lis);
// 练习--依次输出3个li的DOM对象
const navList = document.querySelectorAll('.nav li')
for (let index = 0; index < navList.length; index++) {
console.log(navList[index]);
}
</script>
</body>
三、 操作元素
1. 操作元素内容
- innerText：修改文本内容，不解析标签
- innerHTML：修改文本内容，解析标签
<body>
<div class="box">这是文本内容</div>
<script>
// 1. innerText 不解析标签
const box = document.querySelector('.box')
box.innerText = '改成innerText'
// 2. innerHTML 可解析标签
box.innerHTML = '改成inner HTML'
box.innerHTML = '<strong>改成inner HTML</strong>'
</script>
</body>
2. 操作元素属性
(1)、常用属性（href之类的）
常用属性比如：href，title，src
语法：对象.属性 = 值
(2)、通过style属性操作CSS
语法：对象.style.样式属性 = 值
注：
如果属性有-连接符，需要转换为小驼峰命名，比如background-color,此处需写成backgroundColor；
赋值的时候不要忘记加css单位
<body>
<div class="box">div</div>
<script>
//获取对象
const box = document.querySelector('.box')
box.style.width = '200px'
box.style.height = '200px'
box.style.backgroundColor = 'skyblue'
</script>
</body>
(3)、通过类名(className)操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，可以通过借助于css类名的形式。
语法：对象.className = '类名'
className的本质是替换类名，如果需要添加类名，需要保留之前的类名
<style>
.test {
width: 200px;
height: 200px;
background-color: greenyellow;
}
.test2 {
width: 250px;
height: 250px;
color: purple;
}
</style>
<body>
<div class="test">className测试</div>
<script>
// className操作CSS
// (1)获取元素
const testBox = document.querySelector('.test')
// (2)修改类名,覆盖原来的类名
testBox.className = 'test2'
// 若仍要保持原来的属性
testBox.className = 'test test2'
</script>
</body>
(4)、通过classList操作控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
// 追加一个类
testBox.classList.add('类名')
// 删除一个类
testBox.classList.remove('类名')
// 切换一个类，有则删掉，没有就加上
testBox.classList.toggle('类名')
toggle：类似于开关，可用于切换背景模式(白天，黑夜)
(5)、操作表单元素属性
- 获取表单值用value（innerHTML获取不到表单的值）
- 设置表单属性：
DOM对象.属性名 = 值 - 表单中添加就有效果,移除就没有效果的属性一律使用布尔值表示。如果为true 代表添加了该属性 如果是false 代表移除了该属性，比如disabled，checked，selected.
<body>
<input type="text" value="computer"><br><br>
<input type="checkbox" id="hobby" name="喝酒" checked> 喝酒
<input type="checkbox" id="hobby" name="抽烟"> 抽烟
<input type="checkbox" id="hobby" name="烫头"> 烫头
<br><br>
<input type="button" disabled class="buton">
<script>
// 获取表单的值 value属性
const ipt = document.querySelector('input')
console.log(ipt.value); // computer
// console.log(ipt.innerHTML); innerHTML获取不到表单的值
// 设置表单的值
ipt.value = 'tree'
ipt.type = 'password'
console.log(ipt.value); // tree
// 复选框
const hobbys = document.querySelectorAll('#hobby')
hobbys[0].checked = false
// 字符串只有null或空字符串会被解析为false,这里只接受boolean值,发生了隐式转换！
hobbys[1].checked = 'true'
// 按钮disabled
const buton = document.querySelector('.buton')
buton.disabled = false
</script>
</body>
(6)、自定义属性
data-自定义属性，注意要以data- 开头。DOM对象上通过dataset对象获取自定义的属性
<body>
<!-- data-自定义属性 -->
<div data-id="1" data-name="nothing">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one = document.querySelector('div')
console.dir(one);
console.log(one.dataset.id); // 1
console.log(one.dataset.name); // nothing
</script>
</body>
四、 定时器-间歇函数
1. 开启定时器
语法： setInterval(函数名,间隔时间)
- 该函数返回的是该定时器的
id。每隔一段时间调用这个函数 - 参数间隔时间的单位是毫秒
- 函数不是立即执行，而是过了间隔时间后，执行该函数
- 也就是：间隔时间，执行函数，间隔时间，执行函数
- 而不是：执行函数，间隔时间，执行函数，间隔时间
// 匿名函数
let num = setInterval(function () {
console.log('3秒钟执行一次');
}, 1000)
// 不用匿名函数
function fn () {
console.log('1S执行一次');
}
let num2 = setInterval(fn, 1000) //如果是写fn()的话,则会出错,因为fn()是调用函数
2. 关闭定时器
语法：clearInterval(定时器id)
// 关闭定时器2
clearInterval(num2)
