如何使用 Node js 操作 DOM？

Posted 2023-03-07

【中文标题】如何使用 Node js 操作 DOM？

【英文标题】：How to manipulate DOM using Node js?

【发布时间】：2020-12-03 22:33:44

【问题描述】：

我是 javascript 和 Node.js 的新手，但我想弄清楚 Node 中是否存在具有相同功能的 document.getElementById() 替代方法。如果不能在 Node 中完成，是否可以创建一个纯 js 文件来操作 DOM 和一个单独的 Node 文件。有关额外信息，我想做的是将 csv 行转换为 json 对象，然后用新信息更新网页，这就是我想使用 document.getElementById() 的原因。

【问题讨论】：

DOM 存在于您的浏览器中。 Node 可以在安装了 node 的任何计算机上运行，​​但没有浏览器。 DOM 是从 html 创建的，因此您可以使用最终成为 DOM 的节点创建 html。或者您可以使用节点（也许是 puppeteer？）打开和控制浏览器，您可以使用它修改 DOM。或者您可以有一个前端 html 与由节点运行的后端服务器通信，并使用前端进行更改，但为节点的更改提供数据。我认为这是一个关于如何使用节点操作 DOM 的非常详尽的列表。 （都是间接的。）

【参考方案1】：

document.getElementById() 是浏览器中存在的函数。 nodejs中没有这个功能。

可以获得一个第 3 方模块，该模块将解析 HTML 网页，创建 DOM，然后允许您以编程方式访问 DOM 以查看网页中的内容。 Cheerio 和 Puppeteer 是两个这样的第 3 方模块，每个模块都有不同级别的功能。 Puppeteer 实际上使用 Chromium 浏览器引擎，甚至可以在页面中运行 Javascript 并生成屏幕截图。 Cheerio 解析 HTML 并让您访问它创建的内容（无需运行 Javascript）。

听起来您可能对网页的工作方式有些困惑。在最终用户的计算机上运行的浏览器会加载网页。一旦页面加载完毕，服务器的工作就完成了。该网页仅存在于用户计算机上的浏览器中。服务器无法自行直接更改该网页。

要更改该网页（无需重新加载），您必须在网页（在用户的浏览器中运行）中具有支持的 Javascript 代码。例如，您可以让您的 Javascript 从 Web 页面发出 Ajax 调用，该调用将从服务器请求某些数据。当服务器收到该请求时，它可以生成数据并将 JSON 返回给浏览器。浏览器中的 Javascript 将接收该 JSON，将其解析为 Javascript 对象，然后使用 DOM 根据接收到的数据将新对象插入现有网页。

请注意，对浏览器中现有网页的所有更改都是由运行在用户浏览器中的网页中的 Javascript 进行的，而不是直接由服务器进行。服务器可以提供数据，但不能直接改变用户的网页本身。当然，用户可以请求更新页面，浏览器会请求整个页面的新版本，然后服务器可以提供一个包含不同数据的页面，但这会涉及重新加载整个页面。

nodejs 还存在模板引擎，因此当您的服务器生成网页时，模板引擎可以帮助您为该网页创建一组包含动态数据的 HTML。这不会动态更改已经位于正在显示的浏览器中的网页。相反，它可以帮助您从头开始生成网页，该网页在首次下载时将动态数据合并到网页中。在 nodejs 中与 Express 一起使用的模板引擎示例有 Pug、EJS、Nunjucks、handlebars 和许多 others。