一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
检查错误的插件：
一、 基本认知
1. 作用和分类
-
作用: 就是使用 JS 去操作 html 和浏览器
-
分类：DOM (Document Object Model——文档对象模型)、BOM（浏览器对象模型）
Dom本质:将网页内容将对象来处理
2、Dom对象
DOM对象：浏览器根据html标签生成的 JS对象
-
所有的标签属性都可以在这个对象上面找到
-
修改这个对象的属性会自动映射到标签身上
DOM的核心思想
-
把网页内容当做对象来处理
-
document 对象（网页最大的对象）
-
是 DOM 里提供的一个对象
-
所以它提供的属性和方法都是用来访问和操作网页内容的
-
例：document.write()
-
网页所有内容都在document里面
二、获取Dom元素
1. 根据CSS选择器来获取DOM元素 (重点)
1.1 选择匹配的第一个元素
document.querySelector('css选择器')
参数：包含一个或多个有效的CSS选择器 字符串
例如：
返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。
1.2 选择匹配的多个元素
document.querySelectorAll('css选择器')
得到的是一个伪数组：
-
有长度有索引号的数组
-
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
三、设置/修改DOM元素内容
1. document.write()
-
只能将文本内容追加到 前面的位置
-
文本中包含的标签会被解析
2. 元素innerText 属性
-
将文本内容添加/更新到任意标签位置
-
文本中包含的标签不会被解析
3. 元素.innerHTML 属性
-
将文本内容添加/更新到任意标签位置
-
文本中包含的标签会被解析
四、设置/修改DOM元素属性
1. 设置/修改元素常用属性
-
还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
-
最常见的属性比如： href、title、src 等
-
语法：
对象.属性名 =属性值
例如：pic.src = './../xx.jpg'
2. 设置/修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
-
比如通过 轮播图小圆点自动更换颜色样式
-
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
通过 style 属性操作CSS
注意：
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
例如：
element.style.paddingLeft = '300px'
document.body.style.backgroundImage = `url(./images/b0${index}.jpg)`
操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。(会覆盖以前的类名，要把全部类名写上)
语法： 元素.className = 'one active'
或者
element.setAttribute("class", "active");
去除属性：
document.getElementById("div1").removeAttribute("align");
注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
(toggle()是有就删除，没有就添加)
3. 设置/修改 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
-
获取: DOM对象.属性名
-
设置: DOM对象.属性名 = 新值
例如：文本框
let pwd = document.querySelector('input')
pwd.value = '小米手机'
pwd.type = 'password'
五、定时器-间歇函数
1. 开启定时器
function show() {
alert('你真的很棒！');
}
setInterval(show, 1000)
- 作用：（第一个参数）每隔一段时间调用这个函数
-（第二个参数） 间隔时间单位是毫秒
注意：
1.函数名字不需要加括号，不能加
2.定时器返回的是一个id数字
2.关闭定时器
