@tempots/dom

BrowserContext class

DOMContext is an immutable class that represents the context of a DOM element. It provides methods and properties to manipulate and interact with the DOM element.

A reference in a DOMContext is to mark a position within a set of sibblings. It is used to insert new elements before the reference.

Signature:

declare class BrowserContext implements DOMContext

Implements: DOMContext

Constructors

Constructor	Modifiers	Description
(constructor)(document, element, reference, providers)		Constructs a new `DOMContext` instance.

Properties

Property	Modifiers	Type	Description
addClasses	`readonly`	(tokens: string[]) => void	Adds classes to the element.
appendOrInsert	`readonly`	(child: Node) => void	Appends or inserts a child node to the element, depending on whether a reference node is provided.
clear	`readonly`	(removeTree: boolean) => void
createElement	`readonly`	(tagName: string, namespace: string \| undefined) => HTMLElement	Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace.
createText	`readonly`	(text: string) => Text	Creates a new text node with the specified text content.
document	`readonly`	Document	The `Document` instance associated with this context.
element	`readonly`	HTMLElement	The `Element` instance associated with this context.
getClasses	`readonly`	() => string[]	Gets the classes of the element.
getProvider	`readonly`	<T>(mark: ProviderMark<T>) => T	Retrieves a provider for the given provider mark.
getStyle	`readonly`	(name: string) => string	Gets the style of the element.
getText	`readonly`	() => string	Gets the text content of the current element or text node.
isBrowserDOM	`readonly`	() => this is BrowserContext	Returns `true` if the context is a browser DOM context.
isHeadlessDOM	`readonly`	() => this is HeadlessContext	Returns `true` if the context is a headless DOM context.
makeAccessors	`readonly`	(name: string) => { get: () => any; set: (value: unknown) => void; }
makeChildElement	`readonly`	(tagName: string, namespace: string \| undefined) => DOMContext	Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace and appends it to the current element.
makeChildText	`readonly`	(text: string) => DOMContext	Creates a new text node with the specified text content and appends it to the current element.
makePortal	`readonly`	(selector: string) => DOMContext	Creates a new `DOMContext` instance with a reference to a DOM element selected by the provided `selector`.
makeRef	`readonly`	() => DOMContext	Creates a new `DOMContext` with a reference to a newly created text node. The text node is appended or inserted to the current `DOMContext`. The new `DOMContext` with the reference is returned.
on	`readonly`	<E>(event: string, listener: (event: E) => void, options?: HandlerOptions) => Clear	Adds an event listener to the element.
providers	`readonly`	Providers	The `Providers` instance associated with this context.
reference	`readonly`	Node \| undefined	An optional `Node` instance that serves as a reference for this context.
removeClasses	`readonly`	(tokens: string[]) => void	Removes classes from the element.
setStyle	`readonly`	(name: string, value: string) => void	Sets the style of the element.
setText	`readonly`	(text: string) => void	Sets the text content of the current element.
withElement	`readonly`	(element: HTMLElement) => BrowserContext	Creates a new `DOMContext` instance with the provided `element`.
withProviders	`readonly`	(providers: { [K in ProviderMark<unknown>]: unknown; }) => DOMContext	Returns a new HTMLDOMContext instance with the specified providers merged into the existing providers.
withReference	`readonly`	(reference: Text \| undefined) => DOMContext	Creates a new `DOMContext` instance with the specified reference.

Methods

Method	Modifiers	Description
of(element, ref)	`static`	Creates a new `DOMContext` instance for the given `Element` and optional reference `Node`.