1. 根据CSS选择器来获取DOM元素 (重点）
- 获取一个DOM元素我们使用谁？能直接操作修改吗？
- querySelector() 可以
- 返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返null
- 获取多个DOM元素我们使用谁？能直接修改吗？ 如果不能可以怎么做到修改？
- querySelectorAll() 不可以， 得到的是伪数组，需要for遍历得到每一个元素
- 返回值：CSS选择器匹配的NodeList 对象集合
- （注：小括号里面的参数里面都要写css选择器，必须是字符串，也就是必须加引号）
2. 操作元素内容
元素.innerText 属性：将文本内容添加/更新到任意标签位置。显示纯文本，不解析标签
元素.innerHTML 属性：将文本内容添加/更新到任意标签位置.会解析标签，多标签建议使用模板字符
3. 通过 style 属性操作CSS
语法：对象.style.样式属性 = ‘值’
（注：1. 修改样式通过style属性引出。2. 如果属性有-连接符，需要转换为小驼峰命名法。3. 赋值的时候，需要的时候不要忘记加css单位）
如果需要修改一个div盒子的样式，比如 padding-left, 如何写？
element.style.paddingLeft = ‘300px’ 小驼峰命名
4. 操作类名(className) 操作CSS
可以同时修改多个样式，但是直接使用 className 赋值会覆盖以前的类名
语法：
//active是一个CSS类名
元素.className = 'active'
5. 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类（有该类名就删除，没有就加上）（重要）
元素.classList.toggle('类名')
6. 操作表单元素属性
- （点击眼睛，可以看到密码，本质是把表单类型转换为文本框）
表单.value = '用户名'
表单.type = 'password'
- 如果为true 代表添加了该属性 如果是false 代表移除了该属性。
比如： disabled、checked、selected
表单.checked = true//选中按钮
表单.disabled = true//禁用按钮
7. 定时器-间歇函数
每隔一段时间需要自动执行一段代码，不需要我们手动去触发（例如：网页中的倒计时）
开启定时器：
setInterval(函数, 间隔时间)
function repeat() {console.log('一秒执行一次')
}, 1000)
//每隔一秒时间调用repeat函数
setInterval(repeat, 1000)
作用：每隔一段时间调用这个函数。间隔时间单位是毫秒（注：函数名字不需要加括号。定时器返回的是一个id数字）
关闭定时器：
let 变量名 = setInterval(函数名, 间隔时间)；clearInterval(变量名)
let timer = setInterval(function(){console.log('一秒执行一次')
},1000)
clearInterval(timer)
8. 事件监听
语法：
元素对象.addEventListener('事件类型',要执行的函数)
<button>点击</button>
<script>const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('你早呀~')})
</script>
事件监听三要素：
事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事
（注：事件类型要加引号。函数是点击之后再去执行，每次点击都会执行一次）
9. 事件类型
- 鼠标事件（鼠标触发）：click 鼠标点击。mouseenter 鼠标经过。mouseleave 鼠标离开
- 焦点事件（表单获取光标）：focus 获得焦点。blur 失去焦点
- 键盘事件（键盘触发）：Keydown 键盘按下触发。Keyup 键盘抬起触发
- 文本事件（表单输入触发）：input 用户输入事件
10. 说说this吧，this指向谁
- 非严格模式下，普通函数中，this指向的是window
- 若是事件监听函数，this指向的是调用者
- 箭头函数是没有this的
- 若想改变this的指向方向，可用apply、call
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
11. 回调函数
- 将函数 A 作为参数传递给函数 B 时，我们称函数 A 为回调函数
- 使用场景：setInterval里的函数和事件监听里的函数，写完之后不会立马执行。
定时器每隔一段时间便回头调用这个函数，事件监听每点击一次，也回头调用该函数。 - 使用匿名函数做为回调函数比较常见
12. 事件冒泡
- 捕获阶段（加true）是 从父到子。**冒泡阶段（重要）**是从子到父
- 当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件(如：都是click点击事件）
- 事件冒泡是默认存在的
13. 阻止冒泡如何做？
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
事件对象.stopPropagation()
14. 阻止元素默认行为如何做？
我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
e.preventDefault()
15. 解绑事件
**（注意：匿名函数无法被解绑）**所以要给函数命名
function fn() {
alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件监听移除解绑
btn.removeEventListener('click', fn)
16. 鼠标经过事件
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果（推荐）
17.事件委托的好处
- 原理：给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
- 实现：事件对象.target.tagName 可以获得真正触发事件的元素
（注：e.target是我们点击的对象）
18. 自定义属性
定义的id值为字符串型
<div data-id="0"></div>
<script>
const div = document.querySelector('div')
console.log(div.dataset.id) // 0
</script>
