html 如何使用Node JS访问DOM元素?

kpbpu008  于 2023-02-27  发布在  其他
关注(0)|答案(4)|浏览(171)

Java脚本文件

const path = require('path');
const http = require('http');
const fs = require('fs');

const dir = '../frontend/';

const server = http.createServer((request, respond) => {
      console.log(request.url);

      respond.writeHead(200, {
            'Content-Type': 'text/html',
      });

      const readStream = fs.createReadStream(dir + 'index.html', 'utf-8');
      readStream.pipe(respond);
});

const icons = 'icons/';

fs.readdir(icons, (error, files) => {
      if (error) throw error;

      files.forEach((file) => {
            if (path.extname(file) == '.svg') {
                  // I want to append this filename in the DOM Element.
                  document.querySelector('.container').innerHTML = file; // Like This
                  // console.log(file); 
            }
      });
});

server.listen(3000, 'localhost');

HTML文件

<div class="container"></div>

每当我试图执行上面的代码时,它都会给我一个如下的错误

document.querySelector('.container').innerHTML = file;
                  ^

ReferenceError: document is not defined
    at D:\Framework Final\backend\server.js:26:19
    at Array.forEach (<anonymous>)
    at D:\Framework Final\backend\server.js:23:13
    at FSReqCallback.oncomplete (fs.js:171:23)

谁能告诉我如何才能做到同样的没有得到一个错误。

o0lyfsai

o0lyfsai1#

上面的错误非常明显:
未定义文档
document不存在于节点(例如服务器)环境中,它仅存在于浏览器中。
您将需要使用单独的库来解析您的HTML文件,以便执行querySelector('.container')等查询。
要查看的库(作为示例):
https://github.com/taoqf/node-fast-html-parser
https://github.com/cheeriojs/cheerio

c86crjj0

c86crjj02#

在NodeJS中,文档对象不存在。您无法访问DOM节点NodeJS中DOM中的任何内容。
NodeJS是服务器端Javascript。
如果你想从客户端得到任何数据,你必须添加客户端代码并发送客户端的数据到服务器。这是通过一个后请求完成的。在后端,你必须设置一个服务器与路由。要在NodeJS中设置服务器,请使用Express(常用)。谷歌一下。

dtcbnfnu

dtcbnfnu3#

js是服务器端,文档不存在。所以Dom不存在。你需要尝试客户端的Web浏览器端。我的意思是简单地创建一个网页文档
但您也可以查看此答案以了解更多信息
stackoverflow.com/questions/34309557/how-to-access-dom-using-node-js

bgtovc5b

bgtovc5b4#

我也遇到过类似的问题。我在做Jest测试,有些测试需要操作DOM元素。我的工作是安装JSDOM并遵循基本用法说明。JSDOM

npm i jsdom

之后,当我运行测试时,它显示了这个错误:

node:internal/modules/cjs/loader:1183
  return process.dlopen(module, path.toNamespacedPath(filename));
                 ^

Error: The module '\\?\C:\Users\pc\node_modules\canvas\build\Release\canvas.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 72. This version of Node.js requires

我不确定是否是因为我使用的是Windows,但我刚刚安装了画布:

npm install canvas

(In Git Hub上的JSDOM doc文件中的事实(它谈到了这一点)JSDOM
在我的示例中,它显示了一些高严重性漏洞,因此我只需运行:

npm audit fix

如果这不能解决问题,您需要强制执行:

npm audit fix --force

之后,它显示我成功,我能够使用JSDOM,因为它是在JSDOM信息页面指定。
希望这些信息对您有所帮助!

相关问题