JavaScript重点知识总结二

感兴趣的朋友可以去我的语雀平台进行查看更多的知识。
https://www.yuque.com/ambition-bcpii/muziteng

3. DOM

3.1 简介

文档对象模型（Document Object Model，简称 DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中的所有标签都是元素，DOM中使用element表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
  • HTML DOM树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除

DOM 把以上内容都看做是对象

3.2 获取元素

<div id="time">2022-09-12div>
<script>
  // 根据id获取元素
  let timer = document.getElementById("time");
  console.log(timer); // 
2022-09-12
  console.log(typeof timer);  // object
  // 打印我们获取的元素对象，更好的查看对象里面的属性和方法
  console.dir(timer);
script>
<ul>
  <li>你好！！！li>
  <li>你好！！！li>
  <li>你好！！！li>
ul>
<ol id="ol">
  <li>谢谢！！！li>
  <li>谢谢！！！li>
  <li>谢谢！！！li>
ol>
<script>
  // 使用标签名获取指定标签的对象的集合
  let lis = document.getElementsByTagName("li");
  console.log(lis)  //[li,li,li,li,li,li]
  // 对对象的集合进行遍历
  for (const li of lis) {
    console.log(li);
  }
script>
<div class="box">盒子1div>
<div class="box">盒子2div>
<div id="nav">
    <ul>
      <li>首页li>
      <li>产品li>
    ul>
div>
<script>
  // 根据类型获得某些元素集合
  let boxs = document.getElementsByClassName("box");
  console.log(boxs)

  // 根据选择器进行获取元素对象
  let firstBox = document.querySelector(".box");
  console.log(firstBox)
  let nav = document.querySelector("#nav");
  console.log(nav)
  // 获取指定选择器的所有元素
  let allBox = document.querySelectorAll(".box");
  console.log(allBox)
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

3.3 事件基础

事件三要素

• 事件源（谁）
• 事件类型（什么事件）
• 事件处理程序（做什么）

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

3.4 操作元素

JavaScript 的DOM操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是

属性。

改变元素内容

element.innerText从起始位置到终止位置的内容, 但它去除html标签， 同时空格和换行也会去掉

element.innerHTML起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

常用元素的属性操作

src href id alt title

表单元素的属性操作

type value checked selected disabled

样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式

element.style 行内样式操作

element.className 类名样式操作

操作元素是 DOM 核心内容

3.5 自定义属性的操作

1. 获取属性值
   1. element.属性 获取内置属性值（元素本身自带的属性）
   2. element.getAttribute('属性') 获得自定义的属性 （标准） 程序员自定义的属性
2. 设置属性值
   1. element.属性 = '值' 设置内置属性值
   2. element.setAttribute('属性', '值') 主要设置自定义的属性 （标准）
3. 移除属性
   1. element.removeAttribute('属性')

3.6 节点操作

获取元素通常使用两种方式

一般地，节点至少拥有nodeType节点类型、nodeName节点名称和nodeValue节点值三个基本属性

元素节点 nodeType 为 1

属性节点 nodeType 为 2

文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父级节点node.parentNode

• parentNode属性可返回某节点的父节点，注意是最近的一个父节点
• 如果指定的节点没有父节点则返回null

子节点

parentNode.children只读属性，只返回所有子元素节点。

1. 如果想要第一个子元素节点，使用parentNode.children[0]
2. 如果想要最后一个子元素节点，使用parentNode.children[parentNode.children.length - 1]

兄弟节点

node.nextSibling返回下一个兄弟节点，找不到则返回null，包含所有的节点

node.previousSibling返回上一个兄弟节点，找不到则返回null，包含所有的节点

node.nextElementSibling返回下一个兄弟元素节点，找不到则返回null，有兼容问题

node.previousElementSibling返回上一个兄弟元素节点，找不到则返回null，有兼容问题

创建节点

document.createElement('tagName')

创建由tagName指定的HTML元素。因为此元素原先不存在，是根据需求动态生成的，也称为动态创建元素节点

添加节点

node.appendChild(child)将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里的:after伪元素

node.insertBefore(child, 指定元素)将一个节点添加到父节点的指定子节点前面，类似于:before

删除节点

node.removeChild(child)从DOM中删除一个子节点，返回删除的节点

复制节点

node.cloneNode()返回调用该方法的节点的一个副本，也成为克隆节点

注意

• 括号里的参数为空或者为false，则是浅拷贝，只克隆复制节点本身，不克隆里面的子节点
• 括号里的参数为true，则是深拷贝，会复制节点本身及里面的子节点

4. 事件高级

4.1 注册事件(绑定事件)

给元素添加事件，称为注册事件（绑定事件）

注册事件有两种方式

• 传统注册方式
  • 利用on开头的事件（onclick） 或 btn.onclick = function() {}
  • 特点： 注册事件的唯一性
  • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
• 方法监听注册方式
  • w3c标准推荐方式addEventListener()
  • 特点：同一个元素同一个事件可以注册多个监听器
  • 按注册顺序依次执行

eventTarget.addEventListener(type, listener[, useCapture])将指定的监听器注册到eventTarget上，当该对象触发指定的事

件时，就会执行事件处理函数。

三个参数

• type事件类型字符串，比如click、mouseover，注意这里不要带 on
• listener事件处理函数，事件发生时，会调用该监听函数
• useCapture可选参数，是一个布尔值，默认是 false
  • 如果是 true，表示在事件捕获阶段调用事件处理程序
  • 如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序

<button>传统注册事件button>
<button>方法监听注册事件button>
<script>
    let btns = document.querySelectorAll("button");
    // 1. 传统方式注册事件
    btns[0].onclick = function () {
        alert("hi");
    }
    // 传统注册会覆盖
    btns[0].onclick = function () {
        alert("你好");
    }

    // 2. 事件监听注册
    btns[1].addEventListener("click", function () {
        alert("哈哈哈！！！");
    });
    // 同一个元素 同一个事件可以添加多个监听器（按事件的处理顺序执行）
    btns[1].addEventListener("click", () => alert("谢谢你！！！"));
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.2 删除事件(解绑事件)

• 传统注册方式

  • eventTarget.onclick = null;

• 方法监听注册方式

  • eventTarget.removeEventListener(type, listener[, useCapture]);
  • eventTarget.detachEvent(eventNameWithOn, callback);

<div>1div>
<div>2div>
<div>3div>
<script>
    let divs = document.querySelectorAll("div");
    divs[0].onclick = function () {
        alert("111");
        // 解绑
        divs[0].onclick = null;
    }

    divs[1].addEventListener("click", fn);

    function fn() {
        alert(22);
        divs[1].removeEventListener("click", fn);
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.3 DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM事件流

DOM事件流分为3个阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

比如我们给一个div 注册了点击事件

事件捕获： 网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

事件冒泡： IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获

过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

注意

• JS代码中只能执行捕获或者冒泡其中的一个阶段
• 传统方式 和attachEvent只能得到冒泡阶段，addEventListener可以得到捕获和冒泡
• addEventListener(type, listener[, useCapture])第三个参数
  • 如果是 true，表示在事件捕获阶段调用事件处理程序；
  • 如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序
• 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
• 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
• 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，后面讲解

<style>
    .father {
        overflow: hidden;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: pink;
        text-align: center;
    }

    .son {
        color: #fff;
        line-height: 200px;
        width: 200px;
        height: 200px;
        margin: 50px;
        background-color: purple;
    }
style>
<div class="father">
    <div class="son">son盒子div>
div>
<script>
    // 第三个参数为true 表示处于捕获阶段调用事件处理程序
    // document->html->body->father->son
    // let son = document.querySelector(".son");
    // son.addEventListener("click", function () {
    //     alert("son");
    // }, true);
    // let father = document.querySelector(".father");
    // father.addEventListener("click", function () {
    //     alert("father");
    // }, true);

    // 第三个参数为false 为冒泡阶段掉用事件处理程序
    // son->father->body->html->document
    let son = document.querySelector(".son");
    son.addEventListener("click", function () {
        alert("son");
    }, false);
    let father = document.querySelector(".father");
    father.addEventListener("click", function () {
        alert("father");
    }, false);
    document.addEventListener("click", function () {
        alert("document");
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

4.4 事件对象

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方

法。比如

• 谁绑定了这个事件
• 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
• 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

// event 可简写成 e 或者 evt
eventTarget.onclick = function(event) {} 
eventTarget.addEventListener('click', function(event) {})
1
2
3

事件对象的使用语法

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

<button>btnbutton>
<script>
    let btn = document.querySelector("button");
    btn.addEventListener("click", event => console.log(event));
script>
1
2
3
4
5

事件对象的常见属性和方法

e.target 和 this 的区别

• this是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
• e.target是事件触发的元素，即点的是哪个元素

<div>123div>
<ul>
    <li>abcli>
    <li>abcli>
    <li>abcli>
ul>
<script>
    // e.target返回的触发事件的对象（元素）    this返回的是绑定事件的对象（元素）
    let div = document.querySelector("div");
    div.addEventListener("click", function (event) {
        console.log(event.target);  //
123
        console.log(this);          //
123
    })
    let ul = document.querySelector("ul");
    ul.addEventListener("click", function (event) {
        console.log(event.target);  // 
...
        console.log(this)   // 给ul绑定了事件，this就指向ul
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.5 事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景
班上有100个学生， 快递员有100个快递， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？
解决方案： 快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
优势： 快递员省事，委托给班主任就可以走了。 同学们领取也方便，因为相信班主任。

• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手

点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。
以上案例：给ul注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。
事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能。

事件委托

• 事件委托也称为事件代理， 在 jQuery 里面称为事件委派

事件委托的原理

• 不在每个子节点单独设置事件监听器，设置在其父节点上，然后利用冒泡原理影响设置每个子节点

<ul>
    <li>知否知否，点我应有弹框在手1li>
    <li>知否知否，点我应有弹框在手2li>
    <li>知否知否，点我应有弹框在手3li>
    <li>知否知否，点我应有弹框在手4li>
    <li>知否知否，点我应有弹框在手5li>
ul>
<script>
    // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
    let ul = document.querySelector("ul");
    ul.addEventListener("click", function (event) {
        // event.target这个可以得到我们点击的对象
        event.target.style.backgroundColor = 'skyblue';
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.6 常用的鼠标事件

禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
})
1
2
3

禁止鼠标选中（selectstart开始选中）

document.addEventListener('selectstart', function(e) {
  e.preventDefault();
})
1
2
3

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象

KeyboardEvent。

4.7 常用的键盘事件

注意

• 使用addEventListener不需要加on
• onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
• 三个事件的执行顺序是：keydown --> keypress —> keyup
• onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。

在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）

键盘事件对象