什么是DOM

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

您可以使用 DOM 方法和 JavaScript 来侦听用户事件，并通过选择、添加、更新和删除用户界面中的特定元素来操作 DOM。DOM 操作不仅允许您针对特定元素，还可以更改其样式和内容。

DOM结构并非本文档需要深入探讨的，有需要了解的，可以点击下面链接转相关文档。

使用 Javascript 更新 UI

这节我们简单讲下使用 JavaScript 和 DOM 方法向项目添加 h1 标签来构建项目。

打开代码编辑器并创建一个新 index.html 文件。在 HTML 文件中，添加以下代码：

index.html 复制代码

<html>
  <body>
    <div></div>
  </body>
</html>

然后给它 div 一个唯一的 id ，以便你以后可以定位它。

index.html 复制代码

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

要在 HTML 文件中编写 JavaScript，请添加标签 script ：

index.html 复制代码

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

现在，在 script 标签中，您可以使用 DOM 方法 getElementById() ，通过其 id ： <div>

index.html 复制代码

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

您可以继续使用 DOM 方法创建新 <h1> 元素：

index.html 复制代码

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // 选择id是app的Div标签
      const app = document.getElementById('app');
 
      // 创建一个H1标签
      const header = document.createElement('h1');
 
      // 创建一个文本节点
      const text = '你好';
      const headerContent = document.createTextNode(text);
 
      // 往新建的H1标签添加文本节点
      header.appendChild(headerContent);
 
      // 把新建的H1标签，添加到id是app的标签中，做为其子结点
      app.appendChild(header);
    </script>
  </body>
</html>

在你的浏览器中打开您的 HTML 文件。您应该会看到一个 h1 标签，上面写着你好。

HTML与DOM

如果你查看浏览器开发人员工具中的 DOM 元素，您会注意到 DOM 包含该 <h1> 元素。页面的 DOM 与源代码不同，换句话说，与您创建的原始 HTML 文件不同。

这是因为 HTML 表示初始页面内容，而 DOM 表示由您编写的 JavaScript 代码更改的更新页面内容。

用纯 JavaScript 更新 DOM 非常强大，但很冗长。你刚才使用了6行代码，才完成了添加一个带有一些文本的 <h1> 元素。

JavaScript 复制代码

      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = '你好';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);

随着应用或团队规模的增长，以这种方式构建应用程序变得越来越具有挑战性。

使用这种方法，开发人员花费大量时间编写指令来告诉计算机应该如何做事。那有更好的方法吗？

命令式编程与声明式编程

上面的代码是一个命令式编程的例子。但在构建用户界面时，声明式方法通常是首选，因为它可以加快开发过程。如果开发人员能够声明他们想要显示的内容（在本例中，带有一些文本的 h1 标记），则不必编写 DOM 方法，这不仅可以快速开发，还可以大面积的降低代码的冗余度。

换句话说，命令式编程就像给厨师分步指导如何制作披萨。声明式编程就像订购披萨，而不关心制作披萨所需的步骤。🍕

React 就是一个流行的声明式库，您可以使用它来方便快捷的构建用户界面。

React：声明式UI库

作为开发人员，你可以告诉 React 你想对用户界面进行什么处理，React 会代表你弄清楚如何更新 DOM 的步骤。

在下一节中，我们将探讨如何开始使用 React。

Next.js14从入门到实战002：React基础篇之渲染用户界面

什么是DOM

使用 Javascript 更新 UI

HTML与DOM

命令式编程与声明式编程

React：声明式UI库