This module provides functions for working with HTML and SVG elements.

Classes

InvalidElementError

Error thrown when an element is not in the DOM or invalid for the operation.

Type Aliases

CreateElementOptions

Options for creating an element using createElement.

ElementChild

Types of children that can be passed to createElement.

ElementLike

Element or EventTarget that can be passed into functions.

ElementPropertiesOf

Properties that can be set on the element with the specified TN tag name.

EventDescriptorFor

Object with a listener that is called when the corresponding event fires and the options that are passed into addEventListener.

EventFor

Any event for an HTML or SVG element.

EventListenerFor

Event listener that is called with event that corresponds to name EN.

EventListenerOrDescriptorFor

Event listener or descriptor used to add listeners to an element created with the createElement function.

EventListenersOrDescriptorsFor

Object with key of event name and value of an event listener or EventDescriptorFor.

EventNameFor

Name of the event handler.

FindOptions

Use to specify search criteria for finding element(s). You can find elements by selector, dataset entries, or attributes.

FocusOptions

Additional options for setting focus to an element.

Target

Represents a type that can be either an Element, EventTarget, or a CSS selector.

Functions

areElementsDifferent

Checks if the Element(s), EventTarget(s), or CSS selector(s) specified as left and the Element, EventTarget, or CSS selector specified as right do not match.

areElementsSame

Returns true if the Element(s), EventTarget(s), or CSS selector(s) specified as left and the Element, EventTarget, or CSS selector specified as right do match.

asElement

Returns an element with tag name TN for the specified target.

createElement

Creates an HTML element with tag name TN and adds the properties/listeners from the options object as well as the optional children.

elementExists

Checks if the specified target exists in the DOM.

findAllElements

Query the DOM to find the elements matching the specified CSS selector in the optionally specified parent.

findAllFocusable

Searches for all focusable elements in either the Document (if no parent specified) or the specified parent.

findElement

Query the DOM for an element matching the specified CSS selector in the optionally specified parent.

focusElement

Sets focus to the specified target. Specify additional options to refine the focus operation.

getElementValue

Returns the value of the specified target with the specified type. The value is returned as a number if the valueAsNumber property returns a valid number, a Date if the valueAsDate property is a valid Date (not null), a boolean if the input is a checkbox or radio type, otherwise is returned as a string.

getInputWidth

Gets the ideal width of the input element (in pixels) that based on its value or placeholder using the measureText approach.

hasParentElement

Checks if the specified child has the specified parent. If either element doesn't exist in the DOM, returns false.

idMatches

Checks if the target has the ID property that matches id.

isElementChildOf

Determines if the child is a child of the parent in the DOM.

isElementInViewport

Checks if the target is visible in the browser viewport.

isElementSameOrChildOf

Checks if the target is the same or a child element of the parent.

isElementScrollable

Checks if the target is currently scrollable.

isElementType

Checks if the target matches the specified tagName. If the target doesn't exist or is invalid, returns false.

isInputType

Checks if the target is an input element of specified inputType. If inputType is omitted, only checks if the target is an input element. The inputType corresponds to the input element's type attribute.

keepElementVisibleIn

Ensures the given target is within the visible scroll area of the specified parent. If the target is not visible, scroll the parent.

listToArray

Converts the items of type NodeList or HTMLCollection to an array.

toElement

Returns an element of tag name TN for the specified Element or EventTarget. You can also pass in a CSS selector string, which will attempt to find the element in the DOM.