happy-dom
Advanced tools
A jsdom alternative with support for server side rendering of web components.
happy-dom is a fast and lightweight DOM implementation for Node.js. It is designed to be compatible with the browser's DOM API, making it useful for server-side rendering, testing, and other scenarios where a DOM is needed outside of a browser environment.
DOM Manipulation
happy-dom allows you to create and manipulate DOM elements just like you would in a browser environment. This is useful for server-side rendering and testing.
const { Window } = require('happy-dom');
const window = new Window();
const document = window.document;
const div = document.createElement('div');
div.textContent = 'Hello, World!';
document.body.appendChild(div);
console.log(document.body.innerHTML); // <div>Hello, World!</div>Event Handling
happy-dom supports event handling, allowing you to add event listeners and dispatch events. This is useful for testing event-driven code.
const { Window } = require('happy-dom');
const window = new Window();
const document = window.document;
const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', () => {
console.log('Button clicked!');
});
document.body.appendChild(button);
// Simulate a click event
const event = new window.Event('click');
button.dispatchEvent(event); // Button clicked!Querying DOM Elements
happy-dom allows you to query DOM elements using methods like `querySelector` and `querySelectorAll`. This is useful for selecting and manipulating specific elements in the DOM.
const { Window } = require('happy-dom');
const window = new Window();
const document = window.document;
document.body.innerHTML = '<div class="test">Hello</div><div class="test">World</div>';
const elements = document.querySelectorAll('.test');
console.log(elements.length); // 2
console.log(elements[0].textContent); // Hello
console.log(elements[1].textContent); // Worldjsdom is another popular DOM implementation for Node.js. It provides a more complete and detailed implementation of the DOM and other web standards. However, it is generally slower and more resource-intensive compared to happy-dom.
cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It is not a full DOM implementation but provides a subset of jQuery functionality for parsing and manipulating HTML. It is faster and more lightweight than jsdom but less feature-rich.
linkedom is a lightweight and fast DOM implementation for Node.js. It aims to be a minimalistic alternative to jsdom, providing essential DOM functionalities with better performance. It is similar to happy-dom in terms of performance and use cases.
A JSDOM alternative with support for server side rendering of web components.
Happy DOM aims to support all common functionality of a web browser.
Custom Elements (Web Components)
Shadow Root (Shadow DOM)
Mutation Observer
Tree Walker
Fetch
And much more..
npm install happy-dom
The example below will show you to Happy DOM can be used for rendering a page.
import { Window } from 'happy-dom';
const window = new Window();
const document = window.document;
document.body.innerHTML = `
<html>
<head>
<title>Test page</title>
</head>
<body>
<div class="myContainer"></div>
</body>
</html>
`;
const myContainer = document.querySelector('.myContainer');
const button = document.createElement('button');
myContainer.appendChild(button);
// Outputs "<div class="myContainer"><button></button></div>"
console.log(myContainer.outerHTML);
The example below will show you how to setup a Node VM context to render a page in Happy DOM. The VM context can set the Happy DOM window object to be the global object and allows executing code scoped within the context.
import { AsyncWindow } from 'happy-dom';
import VM from 'vm';
const window = VM.createContext(new AsyncWindow());
const document = window.document;
const html = `
<html>
<head>
<title>Test page</title>
</head>
<body>
<div class="myContainer">
<!–– Content will be added here -->
</div>
</body>
</html>
`;
const script = new VM.Script(`
const element = document.createElement('div');
const myContainer = document.querySelector('.myContainer');
element.innerHTML = 'Test';
myContainer.appendChild(element);
`);
window.location.href = 'http://localhost:8080';
window.whenAsyncComplete().then(() => {
const myContainer = document.querySelector('.myContainer div');
// Will output "Test"
console.log(myContainer.innerHTML);
});
script.runInContext(context);
document.write(html);
Happy DOM exports two window objects: "Window" and "AsyncWindow". Read more about the differences between them below.
Has all the basic functionality of a DOM except for fetch(). This has been excluded to make it possible to use Happy DOM client side without the dependencies to server side Node packages.
AsyncWindow extends Window and adds support for fetch(). It also has a method called "window.whenAsyncComplete()" which returns a Promise that is resolved when all async tasks has been completed.
The "window.whenAsyncComplete()" method can be used when executing scripts that contains asynchrounous tasks that has to be completed before the render of the page has been completed.
Happy DOM provide with a package called @happy-dom/jest-environment that makes is possible to use Happy DOM with Jest.
Happy DOM provide with a package called @happy-dom/server-rendering that makes the setup of server side rendering easier.
FAQs
Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.
The npm package happy-dom receives a total of 658,116 weekly downloads. As such, happy-dom popularity was classified as popular.
We found that happy-dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.