How can I access DOM Elements using Node JS?

Question

JAVASCRIPT FILE

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 File

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

Whenever I'm trying to execute above code it gives me an error like this

                  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)

Can anyone tell me how can I achieve the same without getting an error.

Simply, you cannot. There is no DOM on the server, just a plain html source file. — Bergi
– Bergi, Commented Apr 25, 2021 at 14:39
The "DOM" is the "Document Object Model", which is an in-memory representation of the HTML elements that were parsed by the browser. Node isn't a browser and so there is no DOM API available. — Scott Marcus
– Scott Marcus, Commented Apr 25, 2021 at 14:40
Seems you are looking for some serverside HTML templating language, that allows you to dynamically generate HTML pages, e.g. with a list of icons from an array in them. — Bergi
– Bergi, Commented Apr 25, 2021 at 14:41
@Bergi Yes! exactly this is what I need! Could you suggest any? — Kunal Tanwar
– Kunal Tanwar, Commented Apr 25, 2021 at 15:44
@KunalTanwar No, I dont want to suggest any. But with that search term, you'll find many libraries on the web, and can choose the one that you like best (for your particular use case) yourself. — Bergi
– Bergi, Commented Apr 25, 2021 at 15:55

Andrew Ymaz · Accepted Answer · 2023-02-23 02:09:53Z

8

The error above is very explicit:

document is not defined

document is not exist in Node (e.g. server) environment, it's exist only in browser.

You will need to use separate library to parse your HTML file in order to do queries like querySelector('.container') and etc.

Libraries to take a look (as an example):

https://github.com/taoqf/node-fast-html-parser

https://github.com/cheeriojs/cheerio

edited Feb 23, 2023 at 2:09

answered Apr 25, 2021 at 14:42

Andrew Ymaz

2,2331 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dyvd · Accepted Answer · 2021-04-25 14:40:53Z

2

In NodeJS, the document Object doesn't exist. You can't access DOM-Nodes or anything in the DOM in NodeJS.

NodeJS is serverside Javascript.

If you want any data from the client, you have to add client-side code and send the data from the client to the server. This is done with a post-request. In the Backend, you have to setup a server with routes. To setup a server in NodeJS, use Express (frequently used). Google about it.

answered Apr 25, 2021 at 14:40

Dyvd

776 bronze badges

2 Comments

Kunal Tanwar Over a year ago

Can you tell me how exactly I can do this any video or anything which can be helpful for me I've googled about the Express and couldn't find what I need! 😩

Dyvd Over a year ago

Here are some useful Videos: Buildl Rest API with NodeJs and Express Working with ApIs and Express Connect to MongoDB (if you want to add a Database) These may be different topics and in the beginning everything might be confusing but deal with it and read about it. I don't get that you don't find something..There are tons of Youtube Tutorials there!

Eyd_dd · Accepted Answer · 2021-04-25 18:48:26Z

1

Node.js is server side, the document doesn't exist. So the Dom doesn't exist. You need to try with client web browser side. I mean simply just create a web page document

But you can also check this answer for more information

stackoverflow.com/questions/34309557/how-to-access-dom-using-node-js

edited Apr 25, 2021 at 18:48

answered Apr 25, 2021 at 16:50

Eyd_dd

214 bronze badges

1 Comment

wahwahwah Over a year ago

This was downvoted (not by me) because it's not a complete answer, and probably is better suited as a comment once you have the rep. But it's close to a complete answer. Check out the SO guidelines under the "Answering" section for more details about the site. Thanks for your consideration.

Daniel · Accepted Answer · 2022-01-24 11:49:46Z

I had an issue similar to this. I was working whit Jest tests and some of the tests have to manipulate DOM elements. What it works for me was install JSDOM and follow instructions of basic usage. JSDOM

npm i jsdom

After that, when I run the test It shows me this error:

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

I am not sure if it is because I am using a Windows, but I just installed canvas:

npm install canvas

(In fact in the JSDOM doc file on Git Hub It talks about that) JSDOM

In my case It show me some high severity vulnerabilities so I just run:

npm audit fix

If that doesn't resolve the issue, you need to force it:

npm audit fix --force

after that it shows me successful and I was able to use the JSDOM as it is specified in the JSDOM info page.

I hope this information helps you!

Collectives™ on Stack Overflow

How can I access DOM Elements using Node JS?

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related