获取 DOM 对象
querySelector：满足条件的第一个元素
querySelectorAll：满足条件的元素集合返回伪数组
操作元素内容
innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

7. 事件

完成事件监听分成 3 个步骤：

获取 DOM 元素
通过 addEventListener 方法为 DOM 节点添加事件监听
等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
事件触发后，相对应的回调函数会被执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件监听</title>
  </head>
  <body>
    <h3>事件监听</h3>
    为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。
    <button id="btn">点击改变文字颜色</button>
    `<script>`
      // 1. 获取 button 对应的 DOM 对象
      const btn = document.querySelector("#btn");

      // 2. 添加事件监听
      btn.addEventListener("click", function () {
        console.log("等待事件被触发...");
        // 改变 p 标签的文字颜色
        let text = document.getElementById("text");
        text.style.color = "red";
      });

      // 3. 只要用户点击了按钮，事件便触发了！！！
    `</script>`
  </body>
</html>

8. 事件类型

mouseenter：监听鼠标是否移入 DOM 元素

mouseleave：监听鼠标是否移出 DOM 元素

keydown：键盘按下触发

keyup：键盘抬起触发

focus：获得焦点

blur：失去焦点

9. 事件流

事件流是对事件执行过程的描述，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。
1. addEventListener 第 3 个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发
2. addEventListener 第 3 个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认值为 false
3. 事件流只会在父子元素具有相同事件类型时才会产生影响
4. 绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）

ev.stopPropagation 方法：阻止冒泡，指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。

10. 操作 DOM 节点

插入节点

<body>
  <h3>插入节点</h3>
  在现有 dom 结构基础上插入新的元素节点
  <hr />
  <!-- 普通盒子 -->
  
  <!-- 点击按钮向 box 盒子插入节点 -->
  <button class="btn">插入节点</button>
  `<script>`
    // 点击按钮，在网页中插入节点
    const btn = document.querySelector(".btn");
    btn.addEventListener("click", function () {
      // 1. 获得一个 DOM 元素节点
      const p = document.createElement("p");
      p.innerText = "创建的新的p标签";
      p.className = "info";

      // 复制原有的 DOM 节点
      const p2 = document.querySelector("p").cloneNode(true);
      p2.style.color = "red";

      // 2. 插入盒子 box 盒子
      document.querySelector(".box").appendChild(p);
      document.querySelector(".box").appendChild(p2);
    });
  `</script>`
</body>

删除节点

`<script>`
  const btn = document.querySelector("button");
  btn.addEventListener("click", function () {
    // 获取 ul 父节点
    let ul = document.querySelector("ul");
    // 待删除的子节点
    let lis = document.querySelectorAll("li");

    // 删除节点
    ul.removeChild(lis[0]);
  });
`</script>`

11. localStorage

作用： 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

特性： 以键值对的形式存储，并且存储的是字符串

使用： localStorage.setItem(key,value)，localStorage.getItem(key)，localStorage.removeItem(key)

本地只能存储字符串,无法存储复杂数据类型，存储复杂数据类型需要将其转换成 JSON 字符串，JSON.stringify(复杂数据类型)
把取出来的字符串转换为对象，JSON.parse(JSON 字符串)

三、进阶

12. 解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

数组解构

`<script>`
  // 普通的数组
  let arr = [1, 2, 3];
  // 批量声明变量 a b c
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  let [a, b, c] = arr;
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
`</script>`

对象解构

`<script>`
  // 普通对象
  const user = {
    name: "小明",
    age: 18,
  };
  // 批量声明变量 name age
  // 同时将数组单元值 小明  18 依次赋值给变量 name  age
  const { name, age } = user;

  console.log(name); // 小明
  console.log(age); // 18
`</script>`

13. 原型对象

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，称为原型对象
这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法
当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。

14. 深浅拷贝

浅拷贝：拷贝的是地址
拷贝对象：Object.assgin()
拷贝数组：Array.prototype.concat()
深拷贝：拷贝的是对象，不是地址
通过递归实现深拷贝
lodash/cloneDeep
通过 JSON.stringify()实现

15. this

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】
箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。