3
章节3
使用 JavaScript 更新 UI
在本节中，我们将开始构建我们的项目，使用 JavaScript 和 DOM 方法将一个 h1 标签添加到您的项目中。
打开您的代码编辑器并创建一个新的 index.html 文件。在 HTML 文件中，添加以下代码
<html>
<body>
<div></div>
</body>
</html>然后为 div 元素指定一个唯一的 id，以便稍后可以定位它。
<html>
<body>
<div id="app"></div>
</body>
</html>要在 HTML 文件中编写 JavaScript，请添加一个 script 标签
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>现在，在 script 标签内，您可以使用 DOM 方法，getElementById()，通过其 id 选择 <div> 元素
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>您可以继续使用 DOM 方法创建一个新的 <h1> 元素
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const text = 'Develop. Preview. Ship.';
const headerContent = document.createTextNode(text);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>为了确保一切正常，请在您选择的浏览器中打开您的 HTML 文件。您应该会看到一个显示“Develop. Preview. Ship.”的 h1 标签。
HTML 与 DOM
如果您查看 浏览器开发者工具 中的 DOM 元素，您会注意到 DOM 包含 <h1> 元素。页面的 DOM 与源代码（换句话说，您创建的原始 HTML 文件）不同。
这是因为 HTML 表示**初始页面内容**，而 DOM 表示**更新后的页面内容**，这些内容已由您编写的 JavaScript 代码更改。
使用纯 JavaScript 更新 DOM 非常强大，但也比较冗长。您编写了所有这些代码来添加一个带有某些文本的 <h1> 元素
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'Develop. Preview. Ship.';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>随着应用程序或团队规模的增长，以这种方式构建应用程序可能会变得越来越具有挑战性。
使用这种方法，开发人员花费大量时间编写指令来告诉计算机**如何**执行操作。但是，如果能够描述您想要显示的**内容**，并让计算机找出**如何**更新 DOM，岂不是更好？
命令式编程与声明式编程
上面的代码是**命令式编程**的一个很好的例子。您正在编写关于**如何**更新用户界面的步骤。但在构建用户界面时，通常更喜欢声明式方法，因为它可以加快开发过程。与其必须编写 DOM 方法，不如让开发人员能够声明他们想要显示的**内容**（在本例中，是一个带有某些文本的 h1 标签）。
换句话说，**命令式编程**就像向厨师提供一步一步的说明，说明如何制作披萨。**声明式编程**就像订购披萨，而不必担心制作披萨的步骤。🍕
React 是一个流行的声明式库，您可以使用它来构建用户界面。
React：一个声明式 UI 库
作为开发人员，您可以告诉 React 您希望用户界面发生什么，React 将代表您找出**如何**更新 DOM 的步骤。
在下一节中，我们将探讨如何开始使用 React。
其他资源
这有帮助吗？