What is happy-dom?
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.
What are happy-dom's main functionalities?
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); // World
Other packages similar to happy-dom
jsdom
jsdom 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
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
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.