Trying to use the DOMParser with node js

by

A lot of browser functionalities, like DOM manipulations or XHR, are not available natively NodeJS because that is not a typical server task to access the DOM – you’ll have to use an external library to do that.

DOM capacities depends a lot on the library, here’s a quick comparisons of the main tools you can use:

  • jsdom: implements DOM level 4 which is the latest DOM standard, so everything that you can do on a modern browser, you can do it in jsdom. It is the de-facto industry standard for doing browser stuff on Node, used by Mocha, Vue Test Utils, Webpack Prerender SPA Plugin, and many other:

    const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
dom.window.document.querySelector("p").textContent; // 'Hello world'

  • deno_dom: if using Deno instead of Node is an option, this library provides DOM parsing capabilities:

    import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
const parser = new DOMParser();
const document = parser.parseFromString('<p>Hello world</p>', 'text/html');
document.querySelector('p').textContent; // 'Hello world';

  • htmlparser2: same as jsdom, but with enhanced performances and flexibility at the price of a more complex API:

    const htmlparser = require("htmlparser2");
const parser = new htmlparser.Parser({
  onopentag: (name, attrib) => {
    if (name=='p') console.log('a paragraph element is opening');
  }
}, {decodeEntities: true});
parser.write(`<!DOCTYPE html><p>Hello world</p>`);
parser.end();
// console output: 'a paragraph element is opening'

  • cheerio: implementation of jQuery based on HTML DOM parsing by htmlparser2:

    const cheerio = require('cheerio');
const $ = cheerio.load(`<!DOCTYPE html><p>Hello world</p>`);
$('p').text('Bye moon');
$.html(); // '<!DOCTYPE html><p>Bye moon</p>'

  • xmldom: fully implements the DOM level 2 and partially implements the DOM level 3. Works with HTML, and with XML also

  • dom-parser: regex-based DOM parser that implements a few DOM methods like getElementById. Since parsing HTML with regular expressions is a very bad idea I wouldn’t recommend this one for production.

More Related Contents:

  1. Why are functions synchronous in Javascript?
  2. await is only valid in async function
  3. nodejs vs node on ubuntu 12.04
  4. Get data from fs.readFile
  5. npm – EPERM: operation not permitted on Windows
  6. Connecting to TCP Socket from browser using javascript
  7. Axios Http client – How to construct Http Post url with form params
  8. Simplest way to wait some asynchronous tasks complete, in Javascript?
  9. node.js shell command execution
  10. How to set NODE_ENV to production/development in OS X
  11. Npm install cannot find module ‘semver’
  12. How do you send images to node js with Axios?
  13. How to generate an MD5 file hash in JavaScript/Node.js?
  14. jQuery .find() doesn’t return data in IE but does in Firefox and Chrome
  15. Should I refrain from handling Promise rejection asynchronously?
  16. Where is the Socket.IO client-side .js file located?
  17. Get the _id of inserted document in Mongo database in NodeJS
  18. Callback function example
  19. My discord bot code is working but is not responding to my commands [duplicate]
  20. Uncaught (in promise) TypeError: Failed to fetch and Cors error
  21. (Embed and) Refer to an external SVG via D3 and/or javascript
  22. When to close MongoDB database connection in Nodejs
  23. how express forming the img URL
  24. Is there a way to “require” a JS file only once in nodejs?
  25. What does “res.render” do, and what does the html file look like?
  26. how to use jQuery installed with npm in Express app?
  27. Connecting to remote SSH server (via Node.js/html5 console)
  28. Socket.io – Manual reconnect after client-side disconnect
  29. JavaScript EventSource SSE not firing in browser
  30. Node JS fs module inside browser

Leave a Comment