NodeJS and DOM API

#javascript #node #webdev

NodeJS is a server-side javascript runtime environment.
DOM API is a client-side api implemented in Web Browsers.

Something NodeJS new learners can be confused.

<html>
  <head>
  </head>
  <body>
    <div class='card'>
      card
    </div>
  </body>
</html>

const div = document.querySelector('.card');
div.addEventListener('click', clickHandler);

You can see this javascript code trying to play with a div tag with a class name .card.
But this is impossible in NodeJS.
The reason is document is a global object that is supported by Web browsers. Thus, You cannot use document in NodeJS.

You may be confused because you are writing it in Javascript.
but Javascript doesn't have that.
You may link your javascript file to a html file, like

<script src="public/js/test.js" />

First, You will open a html file. (i.e index.html).
Then, Web browser will load the html codes and javascript codes through <script> tag. Your javascript codes will be executed in Web browser architecture and the web browser has DOM API which supports document object.

But When you use NodeJS, There's no way your javascript code on NodeJS will be executed on Web browsers.

Thanks for reading my post! If you have some feedback, please share it via comments! :)

Top comments (3)

peerreynders • Mar 15 '22

You may be confused because you are writing it in JavaScript but JavaScript doesn't have that.

Neophytes tend to get confused because of the lack of distinction between JavaScript language features and execution environments that execute JavaScript.

The MDN (Mozilla Developer Network) is one of the best JavaScript resources but is dedicated largely to browser based JavaScript.

Example: JavaScript data types and data structures

Look at the page's breadcrumbs:

"References > JavaScript > JavaScript data types and data structures"

i.e. this is a JavaScript (programming language) topic

Another example: EventTarget.addEventListener()

Breadcrumbs:
"References > Web APIs > EventTarget > EventTarget.addEventListener()"

Not a JavaScript topic but it's about the browser based Web API that can be accessed with JavaScript on a browser.

Finally: Express web framework (Node.js/JavaScript)

Breadcrumbs:
"Guides > Server-side website programming > Express web framework (Node.js/JavaScript)"

Not a reference but a tutorial about Server-side website programming with Node.js. And because it's server-side there'll be templates to generate HTML (later forms) but nothing about the DOM (This approach would be considered dynamic server rendering).

Most of the Node.js specific information can be found on the Node.js API site and Knowledge Base and while JavaScript is everywhere JavaScript, the programming language isn't really discussed here.

Other things like Express or React (Preact; JSX isn't part of JavaScript) have their own sites.