参数和选项（arguments & options）

一条命令通常由三个部分组成：命令、选项和参数。命令很好理解，比如：whoami、curl 或是 node 等等这些都是命令。在使用命令时可能需要告诉它各种执行细节，这就是选项和参数的作用，它们根据命令不同具有不同的可选性，某些命令可能不需要参数，某些命令可能没有选项（虽然不常见，但这是允许的）。

选项

选项通常用于修改命令的行为或提供额外的信息。选项使用一个或两个短线（-）开头，许多选项需要一个额外的值跟着它们。单短线的短选项格式，可以使用一个空格在选项和值之间隔开或是不隔开，不过更推荐使用空格隔开；如果是双短线的长选项格式，则必须使用一个空格在选项和值之间隔开（有时也用 =，具体使用请查阅使用命令的相关文档）。此外不需要任何额外值的短选项可以彼此紧挨着使用。

参数

一条命令可以有多个参数，用于标识信息的来源或目的地，对位置比较敏感，比如：mv source.txt destination.txt。参数一般是需要操作的内容，可能是一个文件路径、一段文本或是标准输入流。

Tips：在类 Unix 操作系统中，有些命令可以使用一个短线代替文件名，这将会使其处理来自标准输入的数据或将数据发送到标准输出。

使用语法说明

当你第一次接触某个命令，想快速获取它的用法时，通常可以使用 --help 或 -h 此类选项查看一些简短的用法说明。下面这些语法说明会帮助你快速理解选项和参数的可选性：

• 尖括号（<key>）代表必需参数，例如：ping <destination>
• 方括号（[key]）代表可选参数，例如：mkdir [OPTION] <dirname>
• 省略号（...）代表可重复参数，例如：cp <source1> [source2...] <dest>
• 竖线（|）代表可选择参数，例如：ip [OPTION] OBJECT { SUBCOMMAND | help }

上述这些符号只是辅助理解如何使用命令的，在终端中实际使用这些命令时不需要再次按照参数的可选性增加这些符号，尖括号所包裹的参数在不容易混淆的情况下可能不会额外标记。

重定向和管道（redirect & pipe）

标准输入输出流（Standard Input/Output Streams，简称标准 I/O 流）是程序与外界交互的基础。标准 I/O 流主要包括标准输入流（stdin）、标准输出流（stdout）和标准错误流（stderr），分别可以用文件描述符 0、1 和 2 来指代。在 Unix 命令行中，我们经常使用重定向和管道来管理这些输入输出流，以便更高效地处理数据和信息。

重定向

重定向的语法非常简单，使用 < 代表重定向输入，使用 > 代表重定向输出。通过重定向输入可以将文件内容作为标准输入流传递给程序，重定向输出则是将程序的标准输出流写入到文件，如果执行一个命令同时需要重定向输入和输出的话，看起来会是这样：command < input > output。重定向输入实际上等价于 0< input，同样的重定向输出实际上等价于 1> output。使用 > 将会将标准输出流重定向到一个文件，如果文件存在则会覆盖原内容，也可以使用 >> 将标准输出流重定向并追加到指定文件。

某些情况下，我们可能需要把标准错误、标准输出一并记录并处理，那这时就需要重定向这些标准流。例如，我需要将标准错误重定向至标准输出，就需要这样：command 2>&1，如果是将标准输出重定向到标准错误，则是这样：command 1>&2。

管道

在处理数据时，管道也是非常强大和常用的工具，使用 | 将左边命令的标准输出连接到右边命令的标准输入，可以将多个命令组合在一起。多条指令使用管道依次传递看起来会使这样：command1 | command2 | command3。管道允许实时处理数据流，命令可以即时地处理输入流的部分内容，而不必等到整个输入流完全生成。默认情况下，标准错误将不会被通过管道传递，它们将会合并并直接输出到终端上，你可以使用重定向标准错误到标准输出来改变这一行为。

返回值（exit code）

与常见的 True False 布尔值返回结果不一样，在命令行中成功都应该返回 0，而其他的返回代码都可能代表着错误或失败，通常来说每个命令都会定义自己的错误码，如果你执行的命令出现了错误可以使用 echo $? 获取到错误码，这在写自动化脚本检测失败时会很有用。

结合 && 和 || 运算符就可以根据命令的执行结果决定后续的操作，例如在 command1 && command2 命令中，如果 command1 执行成功（exit code 等于 0）则执行 command2；反之在 command1 || command2 中，如果 command1 执行失败（exit code 不等于 0）则执行 command2。

配置文件（config）

通常这些命令的全局配置文件都在 /etc 或是 /usr/local/etc 目录中，用户自定义的配置文件通常在 /home/<username>/.<something>rc 此类的文件中。至于 rc 后缀的起源众说纷纭，我们约定成俗，见到 rc 一般当作配置文件都没什么问题。当然，每条命令也可以有自己的配置文件格式，例如：curl 的配置文件通常是按行写各种选项，而 wget 的配置文件则像是一个个的键值对。

环境变量（environment variable）

环境变量是一种在操作系统中用来存储信息的机制，它们包含了系统运行时所需的各种信息，如路径、默认参数、语言设置等。每个环境变量都有一个名称和一个对应的值。通常来说定义环境变量应当全大写，设置环境变量可以采用多种方法，可以根据需要在命令行中临时设置或者在系统中永久生效。

某些命令行程序也会读取项目中会的 .env 或是其他环境变量文件，也会有像是 NODE_ENV=development vite build 此类直接在命令前定义的环境变量的情况，这种情况环境变量不会被记录仅在当前命令中有效。

我们还可以在终端中直接 export 一个环境变量，这样定义的环境变量将仅在当前会话中可用，重启终端或退出登录等操作都会使其失效。比如这样：

export NODE_ENV=development
vite build

如果你想持久化的定义一个环境变量可以将它在 .zshrc 或是 .bashrc 等终端配置文件中 export，在启动该终端时自动添加这些环境变量。例如：

export PATH="/usr/local/go/bin:$PATH"

小测

结语

相信你读完这篇文章对命令行再也没有那么恐惧了，大多数参数与选项设计得都很合理且便于记忆，稍加使用一段时间你将会发现命令实在是太酷了！

参考文档

• https://en.wikipedia.org/wiki/Command-line_interface
• https://en.wikipedia.org/wiki/Redirection_(computing)
• https://en.wikipedia.org/wiki/Pipeline_(Unix)
• https://everything.curl.dev/cmdline/configfile.html
• https://www.gnu.org/software/wget/manual/wget.html#Sample-Wgetrc
• https://cn.vitejs.dev/guide/env-and-mode.html#env-variables

Photo by Nathan da Silva on Unsplash

CSS 过渡（Transition）和动画（Animation）为更改元素的样式提供了平滑、渐进的方式，但是它们的工作方式有些不同。

这是它们之间的主要区别：

本手册通过一些例子去解释两种动画技术，以便你理解它们之间的异同。

目录

1. 什么是 CSS 过渡？
2. CSS 过渡属性的种类
   • 什么是必需 CSS 过渡属性？
   • 什么是 transition-property？
   • 什么是 transition-duration？
   • 必需 CSS 过渡属性的示例
   • 什么是可选 CSS 过渡属性？
   • 什么是 transition-timing-function？
   • 什么是 transition-delay？
   • 可选 CSS 过渡属性的示例
3. CSS 过渡属性的缩写
4. 什么是 CSS 动画？
   • CSS 动画的组成
   • 什么是 CSS @keyframes
5. 什么是 CSS animation 属性？
   • 什么是 CSS animation-name 属性？
   • 什么是 CSS animation-duration 属性？
   • 什么是 CSS animation-timing-function 属性？
   • 什么是 CSS animation-delay 属性？
   • 什么是 CSS animation-iteration-count 属性？
   • 什么是 CSS animation-direction 属性？
   • 什么是 CSS animation-play-state 属性？
   • 什么是 CSS animation-fill-mode 属性？
6. 什么是 CSS animation 属性？
7. CSS 过渡和动画的重要知识要点
8. 总结

话不多说，我们讨论一下 CSS 过渡。

什么是 CSS 过渡？

CSS 过渡提供了一种平滑、渐进的方式去更改指定的 CSS 属性值。

这样，CSS 过渡会使变化在指定时间段内平滑地发生，而不是让浏览器去立即更改某个属性值。

例如，假设你希望当悬停时更改一个元素的尺寸。在这个例子中，你有两个选项：

1. 不使用 CSS 过渡实现更改。
2. 使用 CSS 过渡从元素的初始尺寸平滑地过渡到它的新状态。

让我们看些这两个选项的例子。

不使用 CSS 过渡如何在鼠标悬停时更改图片的尺寸

img {
  width: 40%;
}

img:hover {
  width: 100%;
}

试着编辑它

因为我们没有使用 CSS 过渡，上面的代码立即将图片的尺寸从初始宽度（40%）更改为新的宽度（100%）。

使用 CSS 过渡，你可以获得更愉悦的体验。让我们看看下面的示例。

使用 CSS 过渡如何在鼠标悬停时更改图片的尺寸

img {
  width: 40%;
  transition: width 3s ease-out 0.4s;
}

img:hover {
  width: 100%;
}

试着编辑它

从 width: 40% 到 width: 100%，transition 属性在图片上应用了一个平滑、渐进的过渡。

CSS 过渡属性的种类

我们有两种 CSS 过渡属性：

• 必需过渡属性
• 可选过渡属性

让我们来讨论一下这两者。

什么是必需 CSS 过渡属性

创建 CSS 过渡的两个必需属性：

• transition-property
• transition-duration

什么是 transition-property？

CSS 的 transition-property 指定你希望从初始态过渡到新状态的 CSS 属性。

什么是 transition-duration ？

CSS 的 transition-duration 属性定义了浏览器完成所选择元素过渡的时间长度。换句话说，transition-duration 设置从开始到结束所需的全部时间。

注意以下几点：

• transition-duration 属性只接受毫秒（ms）或秒（s）的时间形式。
• 0 秒（0s）是 transition-duration 的默认值。因此，如果你不定义 transition-duration 属性，将不会有过渡事件发生。
• transition-duration 只接受 0 或正数值。如果你提供其他任何值浏览器将忽略它。

必需 CSS 过渡属性的示例

下面是两个必需 CSS 过渡属性的一些示例。

如何在 3 秒内完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

1. transition-property 告诉浏览器把 img 的 width 从它的初始值（40%）过渡到它的新状态（100%）。
2. 使用 transition-duration 属性定义过渡从开始到结束持续 3 秒（3s）的时间。

因此，浏览器将在 3 秒（3s）内从老值到新值间平滑地过渡，而不是立即把图片从初始宽度（40%）更改到新尺寸（100%）。

如何在 5 秒内完成字体尺寸的过渡

p {
  font-size: 1rem;
  transition-property: font-size;
  transition-duration: 5s;
}

p:hover {
  font-size: 7rem;
}

试着编辑它

在上面片段中我们做了什么：

1. transition-property 告知浏览器过渡 p 元素的 font-size。
2. 使用 transition-duration 属性定义过渡从开始到结束持续 5 秒（5s）的时间。

因此，浏览器将在 5 秒（5s）内从老值到新值间平滑地过渡，而不是立即把 p 的初始字体尺寸（1rem）更改到新尺寸（7rem）。

现在让我们讨论一下可选 CSS 过渡属性。

什么是可选 CSS 过渡属性

这是两个可选 CSS 过渡属性：

• transition-timing-function
• transition-delay

什么是 transition-timing-function？

CSS 的 transition-timing-function 属性定义了所选元素实现过渡的时机（速度）。

换句话说，transition-timing-function 指定了在持续时间内的不同时间间隔实现过渡的速度。

transition-timing-function 属性接受的值如下：

• ease：开始时过渡缓慢，然后加快速度，并缓慢结束。ease 是属性 transition-timing-function 的默认值。它等价于 cubic-bezier(0.25,0.1,0.25,1)。
• ease-in：开始时过渡很慢，随后逐渐增加速度。它等价于 cubic-bezier(0.42,0,1,1)。
• ease-out：开始很快，结束时很慢。它等价于 cubic-bezier(0,0,0.58,1)。
• ease-in-out：开始和结束很慢。它等价于 cubic-bezier(0.42,0,0.58,1)。
• linear：在整个过渡的持续时间内使用一致的速度开始和结束过渡。它等价于 cubic-bezier(0,0,1,1)。
• cubic-bezier(p1, p2, p3, p4)：允许你定义三次贝塞尔曲线的值。

什么是 transition-delay？

CSS 的 transition-delay 属性定义了浏览器在开始过渡前需要等待多长时间。

注意以下几点：

• transition-delay 必须使用毫秒（ms）或秒（s）的形式。
• 0s 是 transition-delay 的默认值，这会使过渡在浏览器将其应用到 HTML 元素时立即开始。
• 一个负值会使过渡从指定时间立即开始。举例来说，假设一个元素的 transition-delay 值设为 -3s，过渡将在 3 秒时立即执行。
• 一个正值会使过渡等待指定的延迟时间后开始。举例来说，假设一个元素的 transition-delay 值设为 3s，这次过渡将延迟 3 秒后开始。

可选 CSS 过渡属性的示例

下面是两个可选 CSS 过渡属性的一些示例。

如何使用 ease-out 速度完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease-out;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

1. transition-property 告知浏览器过渡 img 元素的宽度。
2. 我们使用 transition-duration 属性定义过渡从开始到结束 3 秒（3s）的持续时间。
3. 我们使用 transition-timing-function 属性快速地开始过渡然后缓慢地结束。

如何使用 linear 速度完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

1. transition-property 告知浏览器过渡 img 元素的宽度。
2. 我们使用 transition-duration 属性定义过渡从开始到结束 3 秒（3s）的持续时间。
3. transition-timing-function 属性告诉浏览器将这个元素从初始宽度过渡到新尺寸时，采用恒定的过渡速度。

如何使用 2 秒的延迟完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

1. transition-property 告知浏览器过渡 img 元素的宽度。
2. 我们使用 transition-duration 属性定义过渡从开始到结束 3 秒（3s）的持续时间。
3. transition-timing-function 使用一个恒定的速度完成 img 元素宽度的过渡。
4. 我们使用 transition-delay 属性在过渡的开始添加 2 秒（2s）的延迟。

现在，我们了解了 CSS 过渡的属性，我们可以讨论一下它的缩写语法。

CSS 过渡属性的缩写

我们使用 transition 属性作为 transition-property、transition-duration、transition-timing-function 和 transition-delay 属性的缩写。

换句话说，我们不再这样写：

img {
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

你可以使用 transition 属性替换让你的代码更短，像这样：

img {
  transition: width 3s linear 2s;
}

试着编辑它

这是 transition 属性的语法：

transition: <property-name> <duration> <timing-function> <delay>;

注意你可以使用 transition 去定义多个 CSS 过渡属性的状态。

看这个例子：

img {
  width: 40%;
  opacity: 0.4;
  transition: width 3s linear, opacity 4s ease-out, transform 5s;
}

img:hover {
  width: 100%;
  opacity: 1;
  transform: rotate(45deg);
}

试着编辑它

上面的片段使用逗号（,）去分隔我们应用在 img 元素上的每个过渡属性。

那么，现在你了解了 CSS 过渡是什么、它如何工作，我们来探讨一些 CSS 动画。

什么是 CSS 动画？

CSS 动画 提供了一个平滑、渐进的方式从一个关键帧到另一个关键帧为元素的样式增加动画。

CSS 动画的组成

CSS 动画由两部分组成：

1. 关键帧
2. 动画属性

什么是 CSS @keyframes？

@keyframes 定义了你想要浏览器某关键时刻（帧）平滑地应用在元素上的样式。

CSS @keyframes 的语法

CSS at 规则中 @keyframes 由以下组成：

1. 一个 @keyframes 关键字
2. 一个 @keyframes 名字
3. 零个或多个关键帧块
4. 关键帧选择器
5. 关键帧样式声明

看这个插图：

一个 CSS @keyframes 由一个关键字、一个名字、一个关键帧块组成。

CSS @keyframes 的示例

下面是 CSS @keyframes 的示例

如何定义 change-color 的关键帧

@keyframes change-color {
  /* 最初的关键帧 */
  0% {background-color: purple;}
  /* 最后的关键帧 */
  100% {background-color: yellow;}
}

在上面片段中我们做了什么：

1. 我们创建了一个 @keyframes 命名为 change-color。
2. 我们定义了一个关键帧，供浏览器在关联元素的动画处于 0% 持续时间时应用。
3. 我们定义了一个关键帧，供浏览器在关联元素的动画处于 100% 持续时间时应用。

注意：

• 你可以把你的 @keyframes 按照你希望的随意命名。
• 0% 等价于关键字 from，100% 等价于关键字 to。也就是说，上面的代码片段等价于下面的：

@keyframes change-color {
  /* 最初的关键帧 */
  from {background-color: purple;} 
  /* 最后的关键帧 */
  to {background-color: yellow;} 
}

• 一个动画的开始和结束状态（from 和 to）是可选的。
• 假设你省略了 @keyframes 的开始或结束状态，这种情况下，浏览器将使用元素的现有样式作为起始/结束状态。
• !important 在关键帧中无效，浏览器会忽略任何带有 !important 的关键帧声明。

让我们看另一个例子。

如何定义 shape-image 的关键帧

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

在上面片段中我们做了什么：

1. 我们创建了 @keyframes 规则集 命名为 shape-image。
2. 我们定义了 4 个关键帧，供浏览器在关联元素的动画处于指定关键时刻时应用。

提示： 在 JavaScript 中使用 CSSKeyframesRule 接口访问 CSS @keyframes。

那么，现在我们知道了 CSS @keyframes 规则集，我们可以讨论另一个 CSS 动画的组成部分了—— animation 属性。

什么是 CSS animation 属性？

CSS animation 属性 告知浏览器你希望应用在指定元素上的动画。

换句话说，CSS animation 描述了动画的属性，例如它的名字、持续时间、方向、迭代次数。

下面是 CSS 动画的 9 种属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode
• animation

让我们逐个讨论一下。

什么是 CSS animation-name 属性？

CSS animation-name 属性定义了你希望应用在指定元素上的 @keyframes 包含的样式的名字。

看这个例子：

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

在上面片段中我们做了什么：

1. animation-name 指定了我们希望应用到 div 元素上的 @keyframes。
2. 我们创建了一个名为 change-color 的 @keyframes 规则集。
3. 我们定义了 div 元素的动画在 0% 和 100% 时两个关键帧给浏览器使用。

提示： 你可以使用关键字 none 不激活动画。

什么是 CSS animation-duration 属性？

CSS animation-duration 属性定义了完成一个动画循环的事件。

注意以下几点：

• animation-duration 属性只接受毫秒（ms）或秒（s）的时间形式。
• animation-duration 值只接受 0 或是整数。否则，浏览器将忽略这条声明。
• 0 秒（0s）是 animation-duration 的默认值。
• 假设 0s 是 animation-duration 的值。在这种情况下，浏览器仍将通过触发 animationStart 和 animationEnd 事件来执行动画。但是由 animation-fill-mode 值决定动画是否可见。比如，你设置 animation-fill-mode 为 none，动画则是不可见的。

让我们看一些 animation-duration 属性的例子。

如何在 3 秒内完成更改元素的颜色的动画

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
  animation-duration: 3s;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性指定了我们希望用在 div 元素上的 @keyframes。
2. animation-duration 属性设置了动画一个循环的运行时间在 3 秒（3s）内。
3. 我们创建了 change-color 关键帧规则集。
4. 我们定义了 div 元素的动画在 0% 和 100% 时两个关键帧给浏览器使用。

因此，浏览器将创建一个从第一帧到最后持续 3 秒的平滑的 change-color 动画。

如何在 7 秒内完成更改图片边框和宽度的动画

img {
  animation-name: shape-image;
  animation-duration: 7s;
}

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性指定了我们希望应用到 img 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
3. 我们创建了 shape-image 的关键帧规则集。
4. 我们定义了四个关键帧，以便浏览器在图像动画达到指定关键时刻时应用。

因此，浏览器将从 shape-image 的第一帧到最后一帧创建一个流畅的 7 秒的动画。

什么是 CSS animation-timing-function 属性？

CSS 的 animation-timing-function 属性定义了动画在整个持续时间内的实现时机（速度）。

换句话说，animation-timing-function 属性指定了动画在其持续时间内各个间隔的实现速度。

animation-timing-function 属性接受的值如下：

• ease：慢慢地开始动画，然后加速，并慢慢地结束动画。ease 是 animation-timing-function 属性的默认值。它等价于 cubic-bezier(0.25, 0.1, 0.25, 1)。
• ease-in：用一个递增的速度慢慢地开始动画。它等价于 cubic-bezier(0.42, 0, 1, 1)。
• ease-out：动画开始很快，然后慢慢的结束动画。它等价于 cubic-bezier(0, 0, 0.58, 1)。
• ease-in-out：慢慢地开始并慢慢地结束动画。它等价于 cubic-bezier(0.42, 0, 0.58, 1)。
• linear：在整个动画持续时间内使用一致的速度开始、结束动画。它等价于 cubic-bezier(0, 0, 1, 1)。
• cubic-bezier(p1, p2, p3, p4)：允许你定义三次贝塞尔曲线的值。

然我们看一些 animation-timing-function 属性的例子。

如何使用线性速度完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 7s;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
3. linear 函数应用一个一致的速度到 div 元素的动画上。
4. 我们创建一个名为 change-width 关键帧规则集。
5. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将从 change-width 的第一帧到最后一帧创建一个流畅的 7 秒的动画。

让我们看另一个例子。

如何使用 ease-in-out 和 线性速度完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
3. 我们使用 ease-in-out 函数在 first-div 上应用一个慢慢开始并慢慢结束的动画。
4. linear 函数在 second-div 上用一个一致的速度的动画。
5. 我们创建了名为 change-width 的关键帧规则集。
6. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将从 change-width 的第一帧到最后一帧创建一个流畅的 7 秒的动画。

什么是 CSS animation-delay 属性？

CSS 的 animation-delay 属性定义了浏览器在开始动画之前需要等待多长时间。

换句话说，使用 animation-delay 去指定动画是应该立即开始、从指定时间开始、还是稍后（一段延迟之后）开始。

注意以下几点：

• animation-delay 属性必须是毫秒（ms）或是秒（s）作为单位。
• 0s 是 animation-delay 的默认值，这会使动画在浏览器将其应用到 HTML 元素时立即开始。
• 一个负值会使动画从指定时间立即开始。举例来说，假设一个元素的 animation-delay 值设为 -3s，动画将在 3 秒时立即开始。
• 一个正值会使动画等待指定时间过后开始。举例来说，假设一个元素的 animation-delay 值设为 3s，这次动画将延迟 3 秒后开始。

让我们看一些 animation-delay 属性的例子。

如何 4 秒延迟后完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: 4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
3. 我们使用 ease-in-out 函数在 first-div 上应用一个慢慢开始并慢慢结束的动画。
4. linear 函数在 second-div 上用一个一致的速度的动画。
5. animation-delay 属性在开始 second-div 的动画时应用了一个 4 秒（4s）的延迟。
6. 我们创建了名为 change-width 的关键帧规则集。
7. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器会延迟 second-div 的动画四秒，而立即开始 first-div 的动画。

下面是 animation-delay 属性的另一个例子。

如何从动画序列的第四秒开始完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: -4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
3. 我们使用 ease-in-out 函数在 first-div 上应用一个慢慢开始并慢慢结束的动画。
4. linear 函数在 second-div 上用一个一致的速度的动画。
5. animation-delay 属性使 second-div 的动画从动画序列的第四秒开始。
6. 我们创建了名为 change-width 的关键帧规则集。
7. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器会在第四秒立即开始 second-div 的动画。

什么是 CSS animation-iteration-count 属性？

CSS 的 animation-iteration-count 属性定义了浏览器应重复动画的次数。

注意以下几点：

• 1 是 animation-iteration-count 的默认值。
• animation-iteration-count 属性接受非整数值，0.5 告诉浏览器播放单个动画循环的一半。
• animation-iteration-count 不接受赋值。
• infinite 意味着浏览器将一直重复这个动画。

下面是一些例子。

如何完成两次更改元素宽度的动画

div {
  width: 70px;
  height: 50px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}

@keyframes change-width {
  from {width: 70px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-iteration-count 属性告诉浏览器运行这个动画两次。
5. 我们创建了名为 change-width 的关键帧规则集。
6. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将运行 div 的动画两次。

下面是另一个 animation-iteration-count 属性的例子。

如何无限重复更改元素宽度的动画

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
5. 我们创建了名为 change-width 的关键帧规则集。
6. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将无限次地运行 div 的动画。

什么是 CSS animation-direction 属性？

animation-direction 属性指定动画的第一次迭代是正向还是反向。它还定义浏览器是否应该改变后续迭代的方向。

animation-direction 可接受的值：

• normal：正常的方向播放动画（也就是正向），normal 是 animation-direction 的默认值。
• reverse：相反的方向播放动画（反向）。
• alternate：第一次动画循环正向播放，后续迭代在方向与正向之间交替。
• alternate-reverse：第一次动画循环反向播放，后续迭代在正向与反向之间交替。

下面是一些例子。

如何每次都以反向开始完成改变元素宽度的动画

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
5. animation-direction 属性让每次动画反向开始。
6. 我们创建了名为 change-width 的关键帧规则集。
7. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

下面是 animation-direction 属性的另一个例子。

如何交替动画方向地完成更改元素宽度的动画

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
5. animation-direction 属性让每次动画都交替方向。
6. 我们创建了名为 change-width 的关键帧规则集。
7. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

什么是 CSS animation-play-state 属性？

CSS 的 animation-play-state 属性定义了浏览器是在运行还是暂停特定动画。

animation-play-state 属性接受的值：

• running：指定浏览器运行动画。running 是 animation-play-state 的默认值。
• paused：指定浏览器暂停动画。

看这个例子：

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div:hover {
  animation-play-state: paused;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
5. animation-direction 属性让每次动画都交替方向。
6. 我们在 div 的 hover 伪类上使用了 animation-play-state，以便在用户将鼠标移到 div 元素上时暂停动画。
7. 我们创建了名为 change-width 的关键帧规则集。
8. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

什么是 CSS animation-fill-mode 属性？

CSS 的 animation-fill-mode 属性定义了浏览器在动画运行之前（或之后）应该应用于元素的样式。

animation-fill-mode 可接受的值：

• none：浏览器将不会在动画运行之后或之前应用样式。none 是 animation-fill-mode 的默认值。
• forwards：当动画结束，元素将保留最后动画帧的样式声明。（注意：animation-direction 和 animation-iteration-count 属性将决定最后一帧。）
• backwards：在 animation-delay 期间，动画将保留最初动画帧的样式声明。（注意：animation-direction 属性决定第一帧。）
• both：浏览器将同时应用 forwards 和 backwards 规则。因此，动画属性将在两个方向上扩展。

下面是一些例子：

如何在动画结束为元素增加样式

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-fill-mode 将告诉浏览器当动画结束时保留最后的关键帧样式声明。
5. 我们创建了名为 change-width 的关键帧规则集。
6. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

下面是 animation-fill-mode 属性的另一个例子。

如何在动画延迟这段时间增加样式

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: backwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-fill-mode 将告诉浏览器在 animation-delay 期间保留最开始的关键帧样式声明。
5. 我们创建了名为 change-width 的关键帧规则集。
6. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

让我们看 animation-fill-mode 属性的第三个例子。

如何在动画延迟时和完成动画后增加样式

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: both;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

1. animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
2. animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
3. 我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
4. animation-fill-mode 将告诉浏览器同时应用 forwards 和 backwards 两条规则。
5. 我们创建了名为 change-width 的关键帧规则集。
6. 我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

什么是 CSS animation 属性？

我们使用 animation 属性作为它们的缩写：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode

换句话说，不需要写这些：

div {
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode: both;
}

另外，你也可以使用 animation 属性缩短你的代码，像是这样：

div {
  animation: 5s ease-in-out 2s 3 alternate both running change-width;
}

试着编辑它

这是 animation 属性的语法：

animation: animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-name;

注意：

• 时间值的排列方式很重要。浏览器将第一个时间值视为 animation-duration，而将第二个时间值分配给 animation-delay。
• 最好将 animation-name 放在最后，不然，浏览器可能赋值 animation-name 到其他属性。
• 你可以使用 animation 属性应用多个 @keyframes 规则集到一个元素。看这个例子：

div {
  width: 70px;
  height: 70px;
  background-color: green;
  animation: 
    5s ease-in-out 3s 3 alternate both change-width, 
    5s 3s infinite alternate both change-shape, 
    5s 3s infinite rotate-hue;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

@keyframes change-shape {
  from {border-radius: 0%; border: 1px solid blue;}
  to {border-radius: 50%; border: 7px solid green;}
}

@keyframes rotate-hue {
  from {filter: hue-rotate(0deg);}
  to {filter: hue-rotate(360deg);}
}

试着编辑它

上方的片段使用逗号分隔了三个 @keyframes 并应用到 div 元素上。

注意： 我们用了 hue-rotate() 函数去改变了色调。

CSS 过渡和动画的重要知识要点

1. 你不能为所有的 CSS 属性增加动画。可以去看看 MDN 的可动画化的 CSS 属性文章，以查看可以进行动画处理的属性列表。
2. CSS 过渡和动画对于大多数 CSS 属性来说是昂贵的操作，除了 opacity 和 transform。
3. 应该注意 CSS 过渡可能通过元素的堆叠顺序引起布局的重绘问题，

总结

在这这篇文章中，我们讨论了 CSS 过渡和动画之间的不同，也用了一些例子来讨论应该如何使用它。

感谢阅读！

这还有些有用的 React Typescript 资源

我写了一本有关如何创建 NPM 包的书！

这是一本对初学者友好的书，你可以像是专家一样从零开始去创建、测试、发布一个NPM包。

DOM 操作是在学习 JavaScript 中最令人兴奋的主题之一。这是因为 JavaScript 的主要用途之一就是使网页具有交互性，而 DOM 在这里起到了重要作用。

DOM 是一个非常强大的工具，允许你与网页上的元素进行交互和操作。本手册将帮助你理解并自信地使用 DOM。

你将从 DOM 是什么以及 DOM 可以用来做什么开始学习，然后我们将深入学习如何选择、修改和为 DOM 元素设置样式，你也将学习如何创建一个新元素并添加到你的网页上。

手册也包含了像是如何遍历 DOM、DOM 事件是什么，以及一些项目实践的想法等主题。

让我们开始吧！

目录

• DOM 是什么
  • DOM 可以用来做什么
• 如何选择 DOM 元素
  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • querySelector
  • querySelectorAll
• 如何更改 DOM 元素的内容
  • innerHTML 属性
  • 使用 innerHTML 的安全风险
  • innerText 和 textContent 属性
• 如何处理 DOM 元素的属性
  • getAttribute() 方法
  • setAttribute() 方法
  • removeAttribute() 方法
  • hasAttribute() 方法
• 如何更改 DOM 的样式
  • 使用 .style 属性设置样式
  • 使用 class 设置样式
• 如何遍历 DOM
  • 节点和元素之间的不同
  • 使用 parentNode 还是 parentElement 选择父级
  • 使用 childNodes 还是 children 选择子级
  • 选择第一个或是最后一个元素/节点
  • 在 DOM 中选择兄弟节点
• DOM 事件和事件监听器
  • 事件监听器与事件处理函数
  • JavaScript 中三种注册事件的方法
  • 实践挑战
  • 实践挑战的解决方案
  • 事件对象
  • 事件类型
• JavaScript 的事件流
  • 事件冒泡
  • 事件捕获
  • Event 的 stopPropagation() 方法
• JavaScript DOM 项目
• 总结

DOM 是什么

DOM 全称是文档对象模型（Document Object Model），但是这是什么意思呢？我们分开来看看。

文档指的是你在浏览器上所看到的网页。具体来说，HTML 文档处理页面内容的结构，包括组成页面的文本、图片、链接和其他的元素。

对象指的是像 img, h1, p 这样的元素被视为对象。每一个对象都有属性（类似 id、 class、style）和方法，利用这些属性和方法你就可以操作这些元素。

模型指的是它是 HTML 文档的一种表示或副本，以分层树的形式呈现。这颗树包括了所有元素，并且有它们之间的父子关系。

浏览器会确保 DOM 与 HTML 文档同步，使它们总是保持一致。因此，如果 HTML 中的某些内容发生变化，DOM 也会相应变化，反之亦然。

在树的顶部是 Document 对象，它只有一个子元素 —— html 元素。html 元素也被称为根元素，它有 head 和 body 两个子元素，而每个子元素也都有它们自己的子元素。

元素之间的父子关系使你能够遍历、移动和选择它们。稍后会详细介绍。

DOM 可以用来做什么

DOM 操作允许开发者与网页的结构、样式、内容交互。下面是一些你可以通过 DOM 用来做的事情：

• 更改或移除 DOM 中存在的元素
• 创建并添加新元素到网页
• 更改一些元素的样式
• 给元素添加事件监听器让它们可交互

如何选择 DOM 元素

要对 DOM 元素执行操作，首先必须选择或访问相应的元素。在这一节，你将学到一些常见的方法去选择 DOM 元素。

让我们使用下面通讯录片段来展示各种 DOM 选择器方法如何工作。

  <h1 id="page-title">Phonebook</h1>
  
  <p class="family">Marie</p>
  <p class="family">Jose</p>
  <p class="work">Anne</p>
  <p class="work">Joan</p>

一个标题元素和四个段落元素的简单代码片段

这段代码包括了一个 id 为 page-title 的 h1 标题和四个 p 段落，前两个段落都具有 family 类，而后两个具有 work 类。

1. getElementById

你可以使用这个方法去选择带有 id 属性的元素，id 是独一无二的标识符。例如，当一个 h1 元素有值为 page-title 的 id，页面上的其他元素不应该有相同值作为 id。

这意味着每当你使用 getElementById() 方法，你将只会从 DOM 中选择一个元素。

我们来看例子：

这个 h1 有值为 page-title 的 id，以下是使用 getElementById() 方法选择它的办法：

const titleElement = document.getElementById("page-title")
console.log(titleElement)

这里例子选择了 h1 元素并赋值给了变量 titleElement。

如果 DOM 中没有给定 id 的元素，则 getElementById() 将返回 null。

2. getElementsByClassName

你可以使用这个方法选择超过一个对象。这个方法获取 class 属性的值作为参数在 DOM 中选择给定 class 的所有元素。与 id 不一样，你可以在不同的 HTML 元素上给一个相同的 class。

看这个例子：

const famContacts = document.getElementsByClassName("family")
console.log(famContacts)

这返回了给定 class 的所有元素的 HTML 集合，控制台上如下所示：

注意：HTML 集合看起来像是数组，但实际上不是。你可以使用括号符号访问元素，就像访问数组一样，但是不能使用像是 map、filter 或是 forEach 等数组方法。

console.log(famContacts[0]) 

这样会获得 HTML 集合中的第一个元素，也就是名字为 Marie 的段落。

但是如果你想通过循环遍历 famContacts HTML 集合中的所有元素呢？你首先需要将 HTML 集合转换成数组，然后你就可以任意使用数组方法了。

一个简单的办法从 HTML 集合创建数组就是使用展开语法，像是这样：

let famContactsArray = [...famContacts]

famContactsArray.forEach(element => console.log(element))

使用 forEach 方法，你可以访问 famContactsArray 中每一个子项。如果你没有从 HTML 集合创建一个数组，而试着将数组方法直接用于它浏览器将会抛出一个错误。

这个方法将通过标签名来选择元素。例如：getElementByTagName('p') 将选择页面中所有 p 标签。

像是 getElementsByClassName()，这个方法也返回一个被选择元素的 HTML 集合。

看这个例子:

const allContacts = document.getElementsByTagName('p')
console.log(allContacts)

你可以从 HTML 集合创建一个数组，然后使用任意数组方法。

let allContactsArray = [...allContacts]

allContactsArray.map(element => console.log(element))

译者注：由于 map() 创建一个新数组，在没有使用返回的数组的情况下调用它是不恰当的；应该使用 forEach 或 for...of 作为代替。详见 Array.prototype.map()。

4. querySelector

你可以使用这个方法在 DOM 中选择任意的 HTML 元素，它仅返回一个元素：第一个匹配选择器的元素。

querySelector() 用法类似 CSS 选择器。

举个例子，当你想要选择一个具有 id 的元素时，你会怎么做？用 #id。那当你想要选择具有 class 的元素呢？你会用 .class。

看这个例子:

const firstWorkContact = document.querySelector('.work')
console.log(firstWorkContact)

上边这个例子只获取到了一个具有 work 类的元素，其他的被忽略了。

让我们再看一个像是 CSS 选择器一样使用 querySelector() 的例子。下方 div 元素包含了 4 个 button。

<div>
    <button>First button</button>
    <button>Second button</button>
    <button>Third button</button>
    <button>Fourth button</button>
</div>

假设你想要选择第三个按钮，你可以像下面那样使用 querySelector()。代码中使用了 CSS nth-child 选择器去获取 div 中的第三个 button。

const thirdBtn = document.querySelector('div button:nth-child(3)')
console.log(thirdBtn)

但如果你想选择所有四个按钮而不只是第一个呢？你应该使用 querySelectorAll() 代替。

5. querySelectorAll

类似 querySelector()，querySelectorAll 也是使用 CSS 选择器去选择 HTML 元素。不同的是它返回匹配选择器的所有元素，而不仅仅是第一个。

让我们使用 querySelectorAll() 选择上一个示例中所有的按钮。

const allBtns = document.querySelectorAll('button')
console.log(allBtns)

querySelectorAll() 返回一个被选择元素组成的 NodeList。

注意：querySelectorAll() 返回一个 NodeList。NodeList 与 HTML 集合有点不同，你不需要转换成数组就可以使用 forEach() 方法。

allBtns.forEach(btn => console.log(btn))

但是你仍然不能在 NodeList 使用 map、filter 等这类数组方法，如果你需要的话应该创建一个数组。

你可以阅读这篇 freeCodeCamp 关于 HTML 集合和 NodeList 之间区别的文章来了解更多。

如何更改 DOM 元素的内容

目前为止，你已经学到了几种不同的方法去选择 DOM 元素，但这仅仅是开始。现在，让我们来看看如何操作 DOM 去更改网页的内容。

你需要做的第一件事就是选择元素，你可以用上一小节学到的任一方法。

在选择元素后，你可以使用这几种方法去添加或更新内容。

`innerHTML` 属性

这是一种可以让你读取、更新元素的内容或结构的方法。让我们看看应该如何使用 innerHTML 方法。

下面是一个包含三个 p 标签的代码片段，每个 p 标签都有一个 id。

  <p id="topic">JS array methods</p>
  <p id="first-method">map</p>
  <p id="second-method">filter</p>

你可以使用 innerHTML 获取任一段落的内容。举个例子，我们来获取第一个段落的内容。

const topicElement = document.querySelector('#topic')
console.log(topicElement.innerHTML)

现在，假设你想将 topic 内容从“JS array methods”更改为“JavaScript array methods”。你可以通过将新文本赋值给元素的 innerHTML 来实现。

const topicElement = document.querySelector('#topic')
topicElement.innerHTML = "JavaScript array methods"

使用 innerHTML，你可以更改的不只是内容，你也可以更改元素的 HTML 结构。例如，如果你想让 “JavaScript” 加粗，你可以这样做：

topicElement.innerHTML = "<b>JavaScript</b> array methods"

使用 `innerHTML` 的安全风险

使用 innerHTML 会带来潜在的安全风险，例如：XSS（Cross-site scripting，跨站脚本）攻击。

如果插入的内容来自用户输入或任何不受信任的来源，请确保在使用 innerHTML 前做好校验或清洗，以防止 XSS 攻击。你可以使用类似 DOMPurify 的库来实现这一点。

此外，如果你处理纯文本内容，可以考虑使用 innerText 和 textContent。

`innerText` 和 `textContent` 属性

innerText 和 textContent 忽略 HTML 标签，会把它们当作字符串的一部分。你可以使用这两种方法去读取或更新 DOM 元素的文本。

这两种方法的关键区别在于如何处理文本。使用 innerText 会返回显示在屏幕上的文本，而使用 textContent 则返回标记中的文本。来看下面的例子。

<p>Key =<span style="display: none;">     ABC123<span></p>

这个例子中包括了一个 p 标签，p 标签中 span 标签包含了 Key 的值。因为 span 内联样式被设置为 “none”，所以 Key 值不会显示在屏幕上。

现在，让我们选择这个 p 标签，然后打印 innerText、textContent 这两个值，看看有什么不同。

const paragraph = document.querySelector('p');

console.log("innerText: ", paragraph.innerText)
console.log("textContent: ", paragraph.textContent)

请注意 innerText 返回的文本是在屏幕上显示的样子（不包含使用 CSS 隐藏的 Key 值），textContent 返回的文本包括了隐藏的元素和空格。

让我们再看另一个添加文本到元素的例子。下面的代码包括两个 p 标签，每个 p 标签都有一个 b 标签和一个空的 span 标签，以及它们之间有一个 hr 标签。

  <p>
    <b>innerText Example</b>
    <span id="inner-text"></span>
  </p>
  
  <hr>	
 
  <p>
    <b>textContent Example</b>
    <span id="textContent"></span>
  </p>

现在，让我们选择两个 span 元素，并在其中添加相同的文本。这将帮助你更好地理解 innerText 和 textContent 之间的区别。

const example1 = document.querySelector('#inner-text');
const example2 = document.querySelector('#text-content');

let address = `
  ABC Street,
  Spintex Road,
  Accra,
  Ghana.
`;

example1.innerText = address;
example2.textContent = address;

这段代码给两个示例提供了相同的变量 address，第一个使用了 innerText，第二个使用了 textContent。请看下面的结果：

请注意 innerText 换行了，而 textContent 却没有。

两个方法的另一个关键不同是它们在内部循环的行为，当在一个循环中处理批量操作或频繁更新时 innerText 比 textContent 会慢一些。

看看这篇 freeCodeCamp 文章可以了解更多 innerHTML、innerText 和 textContent 之间的不同。

如何处理 DOM 元素的属性

HTML 属性 提供了有关 HTML 元素的有用信息。这些属性总是包含在元素的开始标签内，属性由一个 name 和 value 组成（但也有只出现 name 的例外情况）。

浏览器根据 HTML 结构生成 DOM 时，会将这些属性转化为 DOM 对象的动态属性。

看这个例子：

这个 HTML 中有一个按钮，按钮有一些属性：

<button id="myBtn" type="submit">Click Here</button>

对于这个例子，浏览器会创建一个 HTMLButtonElement 对象到 DOM 中，并且这个对象的属性也互相匹配。

• HTMLButtonElement.id 的值是 myBtn
• HTMLButtonElement.type 的值是 submit

要使用 JavaScript 与这些属性进行交互和操作，可以使用诸如 getAttribute() 和 setAttribute() 之类的方法直接访问这些属性。

`getAttribute()` 方法

顾名思义，你可以使用这个方法去获取元素上已经存在的属性。

它接受一个参数（属性名）返回属性值，如果你给的属性值在这个元素中不存在，这个方法会返回 null。

看这个例子：

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')
console.log(imageElement.getAttribute('src'))

在上面的例子中，使用 getAttribute() 方法，你可以获取 img 标签的 src 属性值。

`setAttribute()` 方法

这个方法用来设置、更改元素的属性。它接受两个参数，第一个参数是你想要更改的属性名，第二个参数是你想要设定的新值。

看这个例子：

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('src'))
imageElement.setAttribute('src', 'new-image.jpg')
console.log("AFTER:", imageElement.getAttribute('src'))

这个例子先打印了 src 属性值，然后使用 setAttribute() 从 image.jpg 到 new-image.jpg 更改了值。

当你给 setAttribute() 传递了一个在这个元素中不存在的属性作为参数时，它将创建一个新属性。例如，你可以添加一个 height 属性给 img 标签：

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.setAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

第一个打印语句返回 null 是因为 height 属性不存在，但是在我们使用 setAttribute() 设置过后，第二个打印语句返回了 height 的正确值。

`removeAttribute()` 方法

在前面的小节中，你学到了如何使用 setAttribute() 添加一个新属性。如果你想移除一个已存在的属性呢？

你可以使用 removeAttribute() 方法，传递一个你想要移除属性名作为参数。

看这个例子：

  <img src="image.jpg" alt="An example image" height="200">

让我们使用 removeAttribute() 方法移除 height 属性从 img 标签上。

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.removeAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

在调用 removeAttribute() 前，我们第一次打印了 height 的属性值，是 200，但在调用 removeAttribute() 之后，第二次打印结果是 null，可以确认我们从 img 中移除了 height 属性。

`hasAttribute()` 方法

处理 DOM 属性的的另一个方法是 hasAttribute()，你可以使用这个方法检查元素是否有指定的属性。

如果指定属性存在， 则 hasAttribute() 方法返回 true，否则返回 false。

看这个例子：

<img src="image.jpg" alt="An example image" height="200">

让我们使用 hasAttribute() 去检查 img 上是否存在 height 和 width 属性。

const imageElement = document.querySelector('img')

console.log("HEIGHT", imageElement.hasAttribute('height'))
console.log("WIDTH", imageElement.hasAttribute('width'))

因为它存在这个属性，所以 height 返回了 true，而检查 width 时返回了 false，因为它不存在。

如何更改 DOM 的样式

在 JavaScript 中，有两种主要方法处理 DOM 元素的样式，你可以使用 .style 属性或者使用 class。每种方法都有自己的优点以及最适合的情况。

使用 `.style` 属性设置样式

如果你想对某个元素做指定更改的话，你可以使用 .style 属性。.style 属性允许你采用内联的形式直接为元素设置样式，这意味着他会覆盖你在 CSS 中的样式。

使用 .style 属性，你可以访问全部的 CSS 属性，看下面的演示：

  <h1>Styling elements with JavaScript</h1>

const header = document.querySelector('h1')
console.log(header.style)

console.log() 打印了该元素的 CSS 样式声明以及所有的 CSS 属性。

现在我们看一个如何使用 .style 属性的例子。

  <h1>I love JavaScript</h1>

这里有一个 h1 标题，现在让我们使用 .style 属性给它增加一点样式。

const paragraph = document.querySelector('h1')

paragraph.style.color = 'white'
paragraph.style.backgroundColor = 'green'

注意：在 JavaScript 中，如果 CSS 属性名包含两个或更多的单词，你不能使用“-”连字符。例如，在 CSS 中你可以写 background-color，但是在 JavaScript 代码中，你必须使用小驼峰命名，所以 background-color 变成了 backgroundColor。

你也可以通过设定属性值为空字符串删除一个元素的样式。

element.style.propertyName = ""

使用 class 设置样式

通过 class，你可以一次创建样式，并将其应用于不同的元素。这有助于提高代码的可维护性。

className 属性

className 属性展示了 DOM 元素的 class 属性。并且你可以使用它去获取或设置 class 的属性值。

看这个例子：

<p class="food rice-dish">Jollof rice</p>

const jollofParagraph = document.querySelector('p')

console.log(jollofParagraph.className)

jollofParagraph.className = 'favorite'

console.log(jollofParagraph.className)

className 可以读取或替换最近的 class，在上面的例子中，第一次打印是 class 的初始值，在更新 className 属性后，第二次打印则是新值。

这里还有一个更灵活的属性，举个例子，如果你想添加一个其他 class 而不是使用新的 class 替换老的 class 呢？这就是 classList 属性的作用所在。

classList 属性

使用 classList 属性，你可以添加或者移除 class。你可以切换 class、使用新值替换 class，甚至可以检查 class 中是否包含某个值。

看这个例子：

<p class="food">Jollof rice</p>

const jollofParagraph = document.querySelector('p')
console.log(jollofParagraph.classList)

使用 classList.add() 添加 class

jollofParagraph.classList.add('fav', 'tasty')

console.log(jollofParagraph.classList)

这段代码添加了 fav 和 tasty 两个新 class 到 class 列表。

使用 classList.remove() 移除 class

jollofParagraph.classList.remove('tasty')

console.log(jollofParagraph.classList)

这段代码从 class 列表中移除了 tasty class。

使用 classList.replace() 替换 class

jollofParagraph.classList.replace('fav', 'favorite')

console.log(jollofParagraph.classList)

这段代码使用 favorite 替换了 fav

使用 classList.contains() 检查 class 是否存在

const isFavorite = jollofParagraph.classList.contains('favorite')
const isSoup = jollofParagraph.classList.contains('soup')

console.log("Contains favorite: ", isFavorite)
console.log("Contains soup: ", isSoup)

这段代码会检查传递给它的 class 是否包含在 class 列表中。

如果包含在 class 列表中（例如 favorite），则返回 true；如果不包含在 class 列表中（例如 soup），则返回 false。

使用 classList.toggle() 切换 class

当你使用 toggle() 时，它会首先检查该 class 是否存在。如果存在，它将删除该 class 。如果不存在，则会添加。

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

第一次切换，favorite 存在 class 列表中，所以移除。

第二次切换，favorite 不存在 class 列表中，所以添加。

第三次切换，现在 favorite 存在 class 列表中了，所以从 class 列表中移除。

toggle() 会根据 class 的存在与否，不断从 class 列表中添加或删除该值。

如何遍历 DOM

遍历 DOM 意味着在 HTML 文档中的不同元素或节点间移动，包括选择和访问父级、子级或者是兄弟元素（或是节点）。你可以这样做去操作文档结构或是获取信息。

但在我们进入这一小节前，你需要理解节点和元素之间的不同。

节点和元素之间的不同

节点是 DOM 的构件，它们代表着 HTML 结构中的不同组件。

元素是一种特定的节点，但并非所有节点都是元素。代码中一些像是元素属性、文本内容或者是注释都是节点，但它们不是元素。

元素是一种特定类型的节点，它定义了文档内容的结构，可以把元素当作你在用的 HTML 标签，例如 <div>、<p> 和 <ul>。每个元素都可以由属性、文本内容和其他嵌套元素组成。

使用 `parentNode` 还是 `parentElement` 选择父级

当要选择 DOM 元素的父级时，你可以使用 parentNode 或者 parentElement，它们都可以获取到你给的元素的父级。

从实用角度看，元素或节点的父级总是一个元素。所以，无论你使用哪一个，你总能获得选择元素的正确父级。

让我们看一个选择元素父级的例子：

  <div class="container">
    <p class="full-text">
        <i id="italics">Some italicized text</i>
    </p>
  </div>

const italicizedText = document.getElementById('italics')

console.log(italicizedText.parentNode)
console.log(italicizedText.parentNode.parentNode)

首先，选择一个元素，然后，调用 parentNode 这个属性去获取父级。你也可以像是第二个打印语句一样链式调用 parentNode 属性去获取父级的父级。

下面的截图展示了两个打印语句的输出。

使用 `childNodes` 还是 `children` 选择子级

你可以使用 .childNodes 和 .children 属性去选择元素的内容，但它们有些不同。

childNodes： 返回一个被选择元素的所有子节点的 NodeList。它包含元素和像是文本、注释或是其他非元素节点。

.children： 返回一个被选择元素的只包含子元素的 HTML 集合。它不包含像是文本、注释这样的非元素节点。

让我们通过一个例子看看它们的不同：

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

上面的代码只有两个元素，p 和 span，但是有其他节点 —— 文本节点、注释。

const container = document.getElementById('container');

const containerChildNodes = container.childNodes;
const containerChildren = container.children;

console.log(containerChildNodes);
console.log(containerChildren);

childNodes 将返回所有的子节点（包括元素和非元素），它还将元素之间的空格作为文本节点。

这用起来可能会让人感到困惑。因此，除非有充分的理由，否则应坚持使用 .children 属性。

children 将只会返回子元素（p 和 span）。

选择第一个或是最后一个元素/节点

如果你只需要选择第一个或是最后一个元素，你可以使用这四个属性。

• firstChild: 只选择父元素的第一个子节点。
• lastChild: 只选择父元素的最后一个子节点。
• firstElementChild: 选择父元素的第一个子元素。
• lastElementChild: 选择父元素的最后一个子元素。

让我们用上一小节中相同的例子，看看它们分别使如何工作的：

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

const container = document.getElementById('container');

console.log("FIRST CHILD:", container.firstChild)
console.log("LAST CHILD:", container.lastChild)
console.log("FIRST ELEMENT: ", container.firstElementChild)
console.log("LAST ELEMENT:", container.lastElementChild)

注意 firstChild 返回的是第一个文本节点，但 firstElementChild 返回的是第一个元素 p。这意味着它忽略了 p 标签前的文本节点。

另外，请注意 lastChild 返回一个文本节点，尽管从标签上来看 span 之后似乎什么都没有。这是因为 lastChild 属性将 span 的结束标签和 div 元素的结束标签之间的换行符/空格视为一个节点。

这就是为什么通常来说使用 firstElementChild 和 lastElementChild会更安全。

在 DOM 中选择兄弟节点

你已经学到了如何选择元素的父级或子级，你也可以使用以下属性选择元素的兄弟节点。

• nextSibling: 选择相同父元素的下一个节点。
• nextElementSibling: 选择下一个元素忽略任何非元素节点。
• previousSibling: 选择相同父元素的上一个节点。
• previousElementSibling: 选择上一个元素忽略任何非元素节点。

看这个例子：

  <div>
    <p id="one">First paragraph</p>
    text node
    <p id="two">Second paragraph</p>
    another text node
    <p id="three">Third paragraph</p>
    <p id="four">Fourth paragraph</p>
  </div>

const paragraphTwo = document.getElementById('two')

console.log("nextSibling: ", paragraphTwo.nextSibling)
console.log("nextElementSibling: ", paragraphTwo.nextElementSibling)
console.log("previousSibling: ", paragraphTwo.previousSibling)
console.log("previousElementSibling: ", paragraphTwo.previousElementSibling)

nextSibling 和 previousSibling 会选择文本节点，因为它们会考虑父节点内的所有节点。然而，nextElementSibling 和 previousElementSibling 可以只选择 p 标签，因为它们忽略文本这样的非元素节点。

DOM 事件和事件监听器

DOM 事件是浏览器中发生的动作。有了这些事件，你就可以使网站具有互动性。

一些 DOM 事件是用户发起的，像是点击、移动鼠标或是用键盘打字。另一些是浏览器发起的，像是页面加载完成。

事件监听器与事件处理函数

事件监听器是一个让你知道事件什么时候发生的方法，它允许你监听注意 DOM 事件，这样当事件发生时，你可以做点什么。

事件处理函数是对这个事件的响应，当事件发生时这个函数将会运行。

举个例子，你可以给按钮附加一个事件监听器，当用户点击的时候你就可以知道了。然后，你可以写一个事件处理函数，在点击事件发生时在屏幕上打印一些内容。

在这个案例中，当点击发生时事件监听器会通知你的应用，然后触发响应；这个响应（事件发生时调用的函数）就是事件处理函数。

JavaScript 中三种注册事件的方法

你可以使用 JavaScript 通过下面三种不同方法监听并响应 DOM 事件。

• 使用内联的事件处理函数： 就是你添加一个事件监听器作为 HTML 元素的属性。在 JavaScript 早期，这是使用事件唯一的方法。看下面这个例子：

// Example of using an inline event handler

<button onclick="alert('Hello')">Click me!</button>

• 使用 onEvent 处理函数： 当元素只有一个事件处理函数时你可以这样使用。当你使用这个方法添加超过一个事件处理函数时，只有最后一个函数会运行，因为它会覆盖之前其他的。

<!-- An example of using an on-event handler -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')
	
  myButton.onclick = function() {
    console.log("Run first handler")
  }
	
  myButton.onclick = function() {
    console.log("Run second handler")
  }
</script>

正如在控制台所看到的结果，浏览器只运行了第二个事件处理函数的代码。

• 使用 addEventListener() 方法： 这个方法允许你附加超过一个事件处理函数到一个元素上。并且它将按照它们被添加的顺序执行。

一般来说，你应该坚持使用 addEventListener()，除非你有一个令人信服的理由。

addEventListener() 接受两个参数，第一个参数是你想监听的事件名称，第二个参数是当事件发生时你想要运行的事件处理函数。

<!-- An example of using the addEventListener method -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')
	
  myButton.addEventListener('click', function() {
    console.log("Run first handler")
  })
	
  myButton.addEventListener('click', function() {
    console.log("Run second handler")
  })
</script>

实践挑战

再继续学习之前这里有一个挑战。在看解题方法之前，先试着自己解决它。

请看下面的 HTML 和 CSS 代码。

这个挑战包括了两个元素，一个 div#gift-box 和一个 button#click-btn，礼物盒子有一个 hide class。

你的任务是写 JavaScript 去监听按钮的点击事件，当用户点击按钮时显示隐藏的盒子。

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    
      <div id="gift-box" class="hide">🎁</div>
      <button id="click-btn">Show the box</button>
      
  </body>
</html>

.hide {
  display: none;
}

#gift-box {
  font-size: 5em;
}

在 StackBlitz 解决这个挑战

实践挑战的解决方案

如果你能解决这个难题，那恭喜你。如果你没有解决也没事，下面提供了解决方案和解释。

const giftBoxElement = document.getElementById('gift-box')
const buttonElement = document.getElementById('click-btn')

buttonElement.addEventListener('click', function() {
  giftBoxElement.classList.remove('hide')
})

为了解决这个挑战，首先你需要选择 #gift-box 和 #click-btn 两个元素。

然后，你需要给按钮添加一个事件监听器，像是之前提到的，addEventListener() 接受两个参数。

在这个案例中，第一个参数是 'click'，第二个参数是一个函数。

目标是显示这个盒子，盒子使用 hide class 在 CSS 中设置了 display 为 none。显示盒子的一种方法是使用 JavaScript 从 classList 中移除 hide。

事件对象

这是一个当事件发生时浏览器传递给事件处理函数作为参数的 JavaScript 对象。对象包含了一些有用的属性和方法：

• type：发生的事件类型（例如：点击、鼠标悬浮、按下按键等等）
• target：触发这个事件的元素
• clientX 和 clientY：事件发生时，鼠标指针的水平和垂直的坐标
• preventDefault()：阻止与事件相关的默认动作，例如阻止表单的默认提交事件
• stopPropagation()：阻止事件通过 DOM 传播，后面会详细说明

你可以查看所有的属性和方法在 MDN 文档。

事件类型

浏览器允许你监听的 DOM 事件种类很多，下面列举一些常见的。

鼠标事件：

• click：当元素被点击
• dbclick：当元素被双击
• mouseover：当鼠标指针移入元素
• mouseleave：当鼠标指针离开元素
• mousedown：当鼠标在元素上按下
• mouseup：当鼠标在元素上松开

键盘事件：

• keydown：当键盘按键被按下
• keyup：当键盘按键被松开
• keypress：当按键被按下并显示事件的按键时，注意这个事件不是所有按键都可以触发，尤其是不可打印字符按键

表单事件：

• submit：当表单被提交
• input：当输入框字段更改
• change：当表单元素值被更改并失焦

窗口事件：

• load：当浏览器完成页面加载
• unload：当用户离开页面
• resize：当浏览器窗口被调整大小
• scroll：当用户滚动浏览文档

你可以在这查看详细的 DOM 事件表。

JavaScript 的事件流

当 JavaScript 事件发生时，事件会在 DOM 中从发生事件的目标传播到最外层的元素，反之亦然。

例如，假设你点击了页面上的一个按钮。在点击按钮的同时，你也点击了它的父元素以及按钮在 DOM 层次结构中的任何元素。

事件冒泡

这是指事件首先在发生的目标（或是某个元素）被注册，然后向外注册到父元素，最后注册到最外层的元素。

看这个例子：

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

例子中包含了一个 #btn 按钮，随着事件冒泡，当按钮上发生事件（如点击）时，事件会按以下顺序发生。

DOM 中的事件冒泡：从 button 到 div#inner 到 div#outer 到 body 到 html 到 document。

事件从目标元素开始向上冒泡，回到最外层的祖先元素。

事件捕获

事件捕获与事件冒泡相反，事件从最外层祖先元素开始向下沿着 DOM 树到目标元素。

在事件捕获阶段，附加到元素上的事件侦听器是按照从最顶层的祖先到目标元素的层次结构顺序执行的。

如果你想知道为什么这很重要，让我们使用和上面相同的 HTML 片段，看一个实际的例子：

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

让我们分别添加一个事件监听器到button、#inner、#outer 上：

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

默认情况下，浏览器使用事件冒泡的机制，因此，无需为事件监听器添加任何其他参数。这是事件处理函数响应按钮点击时的运行顺序：

1. button
2. #innerDiv
3. #outerDiv

使用事件捕获模型，你可以通过给事件监听器传递第三个参数为 true。

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
}, true)

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
}, true)

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
}, true)

现在运行，事件处理函数的执行顺序将会是相反的方向，像是这样：

1. #outerDiv
2. #innerDiv
3. button

`stopPropagation()` 停止传播事件

你已经学习了事件冒泡如何在元素上注册事件，并一直注册到最外层的祖先元素，也看到了事件捕获是怎么反过来的。

但是如果你不想注册事件到所有祖先呢？这就是 stopPropagation() 的作用所在，你可以使用这个方法在整个 DOM 中阻止事件的传播。

让我们看看如何在之前的例子中使用 stopPropagation()：

button.addEventListener('click', function(event) {
  event.stopPropagation()
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

stopPropagation() 只允许第一个事件监听器的执行。

现在，只有一个事件处理函数被触发。因为 stopPropagation() 在按钮的事件处理函数中，所以在 innerDiv 和 outerDiv 的事件处理函数并没有被触发。

此外，注意 event 对象，你需要在事件处理函数中作为参数传递它。

JavaScript DOM 项目

构建项目是提高对编码概念理解的绝佳方式，所以，卷起袖子，准备工作吧！

这有五个项目想法去帮助你练习巩固你的技巧。

切换开关

设计一个开关，当它被点击时切换它的状态，更新 DOM （例如颜色）反映开关的当前状态。

随机颜色选择器

创建一个简单的应用，用户可以点击一个按钮生成一个随机颜色。在屏幕上包括一个填充被选择颜色的图形，同时显示颜色代码。

倒计时

构建一个从指定时间开始的计时器，在屏幕上实时更新显示剩余时间。

单词计数器

开发一个应用，它提供一个文本输入框和文本域给用户用来输入。当用户输入时，在屏幕上实时显示单词个数。

交互式的 Todo 列表

创建一个应用，允许用户添加、删除、编辑任务。你可以随你开心添加一些想要的高级特性，例如标记任务完成、过滤任务或是排序等。

总结

如果你已经走到了这里，那你现在应该对操作 JavaScript DOM 有着不错的理解。随着实践，你将有足够的信心来处理需要了解这些 DOM 操作概念的高级项目。

一个良好的操作原版 JS DOM 的基础将在使用 React，Angular，Vue，Svelte 这些 JavaScript 库时派上用场。

感谢你阅读本文，祝你编码愉快！想获取更多有深度的教程，欢迎随时订阅我的 YouTube 频道。