happy-dom

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