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 标签，上面写着“开发。预览。发布。”。
HTML vs. 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，那不是很好吗？
命令式编程 vs. 声明式编程
上面的代码是命令式编程的一个很好的例子。你正在编写用户界面应该如何更新的步骤。但在构建用户界面时，声明式方法通常更受欢迎，因为它可以加快开发过程。开发人员不必编写 DOM 方法，如果他们能够声明他们想要显示什么（在本例中是一个带有一些文本的 h1 标签），那将会很有帮助。
换句话说，命令式编程就像给厨师制作披萨的逐步说明。声明式编程就像点披萨，而不关心制作披萨的步骤。🍕
React 是一个流行的声明式库，你可以用来构建用户界面。
React：一个声明式 UI 库
作为开发人员，你可以告诉 React 你希望用户界面发生什么，React 将代表你弄清楚如何更新 DOM 的步骤。
在下一节中，我们将探讨如何开始使用 React。
其他资源
这有帮助吗？