Next学习手册（一）DOM

Next学习手册（一）DOM

九月 25, 2023

React工作原理

当浏览器试图访问一个网页时，会得到诸如下图一样的响应内容：

然后浏览器将通过此响应内容，构造 DOM (文档对象模型)。

然后才是我们所看到的UI界面。

什么是DOM?

对于什么是DOM，Next.js 官方给出了如下解释。

The DOM is an object representation of the HTML elements. It acts as a bridge between your code and the user interface, and has a tree-like structure with parent and child relationships.

翻译：DOM是HTML元素的对象表示。它充当代码和用户界面之间的桥梁，并具有具有父子关系的树状结构。

这意味着我们可以通过DOM界面以及程序来监听用户事件，并通过修改元素来操作DOM。

示例一：

假设我们有一个HTML文件，内容如下：

1
2
3
4
5
6
<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

这个HTML中，我们给<div>加了一个唯一的id，为了方便针对。并且为了在HTML中编写javascript代码，添加了标记。

现在通过一个DOM方法，getElementByID()来根据id选择<div>标签。

1
2
3
4
5
6
7
8
9
10
<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

然后继续使用DOM方法创建一个新的元素。

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
<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      // 根据id 选择div标签
      const app = document.getElementById('app');

      // 声明一个新的 h1 元素
      const header = document.createElement('h1');

      // 声明新的文本内容
      const headerContent = document.createTextNode(
        'Develop. Preview. Ship. 🚀',
      );

      // 将刚才声明的文本内容添加给 h1 元素
      header.appendChild(headerContent);

      // 将刚才声明的 h1 元素 放置在 div中
      app.appendChild(header);
    </script>
  </body>
</html>

接着我们可以看到如下页面：

HTML AND DOM

通过查看页面DOM元素，我们会看到页面中包含<h1>元素，这与我们的源代码不同。

原因就是，HTML表示的是初始页面内容，而DOM表示修改后的页面内容。之所以呈现不同，就是因为我们看到的页面已经被编写的javascript 代码修改过了。

使用简单的javascript代码来更新DOM非常强大，但代码很冗长。我们使用了如下7行代码来更新了一个<h1>元素及其内容。

1
2
3
4
5
6
7
8
<!-- index.html -->
<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

随着应用体积增长，使用这种方法编写应用会越来越难。但开发者通过编写指令，描述想现实的内容，让计算机知道该如何更新DOM，这是很不错的。

命令式编程和声明式编程

上面的代码是命令式编程的例子，我们编写如何更新用户界面的步骤。但涉及到构建用户界面时，声明式编程是首选的，因为这可以加快开发过程。

In other words, imperative programming is like giving a chef step-by-step instructions on how to make a pizza. Declarative programming is like ordering a pizza without being concerned about the steps it takes to make the pizza. 🍕 — Next.js

  1. 1. React工作原理
  2. 2. 什么是DOM?
    1. 2.1. 示例一：
  3. 3. HTML AND DOM
  4. 4. 命令式编程和声明式编程