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 文件。你应该看到一个 h1 标签，上面写着 “Develop. Preview. Ship.”。
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。
其他资源
这有帮助吗？