1. 对const的简单理解
用const声明的值不能更改，对于简单数据类型我们都知道存的值放到了栈里面，但是对于引用数据类型，比如数组和对象，则const声明的变量里面存的不是值，而是地址，值存到了栈里面，只要地址不变，值的增加减少都不会报错。如下图所示：
2. DOM对象
浏览器根据html标签生成的js对象（DOM对象），其核心就是把内容都当做对象来处理。
2.1 获取DOM元素的常见的方法
①
语法：
document.querySelector('css选择器')
返回值为CSS选择器匹配到的第一个元素，没有就返回null
②
语法：
document.querySelectorAll('css选择器')
返回值为CSS选择器匹配的数组对象集合，如果我们想要求集合里的具体某个对象或者所有对象，需要遍历，然后给里面的元素进行修改。要注意： 通过此语法得到的是一个伪数组。有长度和索引号 但是没有数组的相关操作方法。代码和结果如下图：
<body>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const list = document.querySelectorAll('.nav li')
console.log(list)
</script>
</body>
两个比较特殊的元素获取:
document.body 获取body标签;
document.documentElement 获取html标签
2.2 操作元素内容 和 元素属性
由于DOM对象都是根据标签生成的，所以操作标签本质上就是操作DOM对象。
修改标签元素里面的内容有2种方式：
- 对象.innerText 属性
- 对象.innerHTML 属性
两者的区别是：
元素.innerText 属性 只识别文本，不能解析标签
元素.innerHTML 属性 能识别文本，能够解析标签
操作元素属性
①元素常用属性： herf src title id alt等
这类的可直接通过属性名修改。对象.属性 = 值
<script>
// 获取元素
const img = document.querySelector('img')
// 修改图片路径
img.src = './images/01.webp'
</script>
操作样式属性
-通过style属性操作CSS
对象.style.样式属性 = 值， 如果属性有-连接符，需要转换为小驼峰命名法如：
div.style.backgroundColor = 'red' 这种方式生成的属性是行内样式表，权重比较高。
-通过className操作CSS
当修改的样式比较多的时候可以采用这个方式。 具体操作就是在style样式里写一个类名，类里面包含好多属性，我们想调用这个属性的时候，直接对象.className = '类名' 即可。缺点就是多个类名操作麻烦，而且后面的类名会覆盖前面的类名。
- 通过classList操作CSS
为了解决className 容易覆盖以前的类名，可以采用这个方式。
包括三个方法
添加类：对象.classList.add()
移除类：对象.classList.remove()
切换类，有则移除，无则添加：对象.classList.remove()
操作表单元素属性
属性 value disabled checked selected
<body>
<input type="text" value='小米粒' class = "t">
<button disabled>按钮</button>
<input type="checkbox" name="" id="" class="agree">
<script>
// 获取元素
const inp = document.querySelector('.t')
// 1. 修改
inp.value = '小米粒你好啊'
inp.type = 'password'
// 2. 启用按钮
const btn = document.querySelector('button')
// disabled disabled 不可用
// 取消禁止
btn.disabled = false
// 3. 复选框
const checkbox = document.querySelector('.agree')
// 不勾选
checkbox.checked = false
</script>
</body>
自定义属性
html5中推出来了专门的data-自定义属性，标签上一律以data-开头。 获取方式： 对象.dataset.自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#" data-la="index"></a>
<script>
// 获取元素
const a = document.querySelector('a')
// 修改元素
a.dataset.la = '大道不该如此之小'
console.log(a);
</script>
</body>
</html>
定时器-间歇函数
开启定时器语法：
setInterval(函数名， 间隔时间) 间隔时间单位是毫秒。
关闭定时器语法：
clearInterval(标识名)
在创建定时器的时候，浏览器会自动给这个定时器返回一个数字标识。不同的浏览器返回的值不同，所以我们这里可以设置一个定时器标识，便于关闭定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 定时器 这里的n就可以理解为定时器标识
let n = setInterval(function () {
console.log('陈平安 和宁姚 阮秀');
}, 1000)
//console.log(n);
// 关闭定时器
clearInterval(n)
</script>
</body>
</html>
