Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes comprehensive DOM, HTML, CSS, event, and fetch API implementations that follow WHATWG DOM and HTML standards, making it ideal for server-side rendering, testing environments, and headless web automation.
npm install happy-domimport { Window, Document, HTMLElement } from "happy-dom";For CommonJS:
const { Window, Document, HTMLElement } = require("happy-dom");import { Window } from "happy-dom";
// Create a new window instance
const window = new Window();
const document = window.document;
// Parse HTML
document.body.innerHTML = '<div id="myDiv">Hello World</div>';
// Query and manipulate DOM
const div = document.getElementById('myDiv');
div.textContent = 'Hello Happy DOM!';
// Add event listeners
div.addEventListener('click', () => {
console.log('Clicked!');
});
// Trigger events
div.click();Happy DOM is built around several key components:
Browser, BrowserWindow, and related classes for managing browser contextsDocument, Element, Node hierarchyRequest, Response, HeadersCore browser infrastructure for creating isolated browser contexts and window instances. Essential for testing and server-side rendering.
class Browser {
constructor(options?: { settings?: IOptionalBrowserSettings; console?: Console });
readonly settings: IBrowserSettings;
readonly closed: boolean;
readonly defaultContext: BrowserContext;
newContext(): BrowserContext;
newIncognitoContext(): BrowserContext;
newPage(): BrowserPage;
close(): Promise<void>;
waitUntilComplete(): Promise<void>;
abort(): Promise<void>;
}
class Window extends EventTarget {
readonly document: Document;
readonly location: Location;
readonly history: History;
close(): void;
}Foundation DOM classes including documents, nodes, elements, and collections. Provides the core tree structure and manipulation methods.
class Document extends Node {
createElement(qualifiedName: string, options?: { is?: string }): HTMLElement;
getElementById(id: string): Element | null;
querySelector(selector: string): Element | null;
querySelectorAll(selector: string): NodeList;
}
class Element extends Node {
readonly tagName: string;
innerHTML: string;
textContent: string;
getAttribute(name: string): string | null;
setAttribute(name: string, value: string): void;
}Complete implementation of all HTML elements with their specific properties and methods. Covers all standard HTML5 elements.
class HTMLElement extends Element {
style: CSSStyleDeclaration;
onclick: ((event: MouseEvent) => void) | null;
focus(): void;
blur(): void;
click(): void;
}
class HTMLInputElement extends HTMLElement {
value: string;
type: string;
checked: boolean;
readonly files: FileList | null;
}Comprehensive event handling system with all standard event types, event phases, and custom event support.
class EventTarget {
addEventListener(type: string, listener: TEventListener): void;
removeEventListener(type: string, listener: TEventListener): void;
dispatchEvent(event: Event): boolean;
}
class Event {
readonly type: string;
readonly target: EventTarget | null;
readonly currentTarget: EventTarget | null;
preventDefault(): void;
stopPropagation(): void;
}CSS parsing, rule management, and style computation. Includes support for all major CSS rule types and style declarations.
class CSSStyleDeclaration {
getPropertyValue(property: string): string;
setProperty(property: string, value: string): void;
removeProperty(property: string): string;
}
class CSSStyleSheet {
readonly cssRules: CSSRuleList;
insertRule(rule: string, index?: number): number;
deleteRule(index: number): void;
}Complete Fetch API implementation for HTTP requests and responses, including headers, request/response bodies, and abort signals.
class Request {
constructor(input: string | Request, init?: RequestInit);
readonly url: string;
readonly method: string;
readonly headers: Headers;
json(): Promise<any>;
text(): Promise<string>;
}
class Response {
constructor(body?: any, init?: ResponseInit);
readonly status: number;
readonly headers: Headers;
json(): Promise<any>;
text(): Promise<string>;
}File API, Blob handling, FormData, and file input processing for handling uploads and file operations.
class File extends Blob {
constructor(bits: any[], name: string, options?: FilePropertyBag);
readonly name: string;
readonly lastModified: number;
}
class FormData {
append(name: string, value: string | Blob): void;
get(name: string): FormDataEntryValue | null;
getAll(name: string): FormDataEntryValue[];
}Web Components support including Custom Element registry, Shadow DOM, and slot functionality.
class CustomElementRegistry {
define(name: string, constructor: CustomElementConstructor): void;
get(name: string): CustomElementConstructor | undefined;
whenDefined(name: string): Promise<CustomElementConstructor>;
}
class ShadowRoot extends DocumentFragment {
readonly mode: ShadowRootMode;
readonly host: Element;
}Custom Elements & Web Components
Standard browser APIs including Storage, History, Location, Permissions, and various observer interfaces.
class Storage {
readonly length: number;
getItem(key: string): string | null;
setItem(key: string, value: string): void;
removeItem(key: string): void;
clear(): void;
}
class History {
readonly length: number;
back(): void;
forward(): void;
go(delta: number): void;
pushState(data: any, title: string, url?: string): void;
}Media stream handling, text tracks, and audio/video element support for multimedia applications.
class HTMLMediaElement extends HTMLElement {
readonly duration: number;
currentTime: number;
volume: number;
play(): Promise<void>;
pause(): void;
load(): void;
}
class MediaStream extends EventTarget {
readonly id: string;
getTracks(): MediaStreamTrack[];
addTrack(track: MediaStreamTrack): void;
}interface IBrowserSettings {
disableJavaScriptFileLoading?: boolean;
disableJavaScriptEvaluation?: boolean;
disableCSSFileLoading?: boolean;
enableFileSystemHttpRequests?: boolean;
device?: {
prefersColorScheme?: 'light' | 'dark';
mediaType?: string;
};
}
interface IEventInit {
bubbles?: boolean;
cancelable?: boolean;
composed?: boolean;
}
type TEventListener = (event: Event) => void | { handleEvent(event: Event): void };