DomHelpers

DOM Helpers

Description:

  • DOM Helpers

Methods

(static) addClass(element, className) → {string|undefined}

Add a class to a DOM element if it does not already exist.

Description:

  • Add a class to a DOM element if it does not already exist.

Example
addClass(el, "active") => "active"

addClass(el, "") => undefined

addClass(null, "active") => undefined
Parameters:
Name Type Description
element *

The target DOM element
className *

The class name to add
Returns:

Returns:

  • string (class name added or already present) on success
  • undefined for invalid input
Type
string | undefined

(static) addEventListenerHelper(element, type, handler) → {boolean|undefined}

Add an event listener to a DOM element.

Description:

  • Add an event listener to a DOM element.

Example
addEventListenerHelper(button, "click", () => alert("Clicked!"));
Parameters:
Name Type Description
element *

The target DOM element
type *

The event type (e.g., "click", "input")
handler *

The event handler function
Returns:

Returns:

  • true if the listener was added successfully
  • undefined for invalid input
Type
boolean | undefined

(static) appendDynamicTag(child, parent) → {HTMLElement|undefined}

Append a child element to a parent element or document body if parent is not provided.

Description:

  • Append a child element to a parent element or document body if parent is not provided.

Example
const div = createDynamicElement("div", "Hello");
appendDynamicTag(div, document.getElementById("container"));

appendDynamicTag(div) => appends to document.body
Parameters:
Name Type Description
child *

The DOM element to append
parent *

Optional parent DOM element (defaults to document.body)
Returns:

Returns:

  • The appended child element on success
  • undefined for invalid input
Type
HTMLElement | undefined

(static) createDynamicElement(tagName, content, propertyObj) → {HTMLElement|undefined}

Create a DOM element dynamically with optional content and properties.

Description:

  • Create a DOM element dynamically with optional content and properties.

Example
createDynamicElement("div", "Hello", { id: "myDiv", className: "card" });

createDynamicElement("span") => <span></span>

createDynamicElement(null) => undefined
Parameters:
Name Type Description
tagName *

The HTML tag name for the element
content *

Optional text content
propertyObj *

Optional object of properties to assign
Returns:

Returns:

  • HTMLElement on success
  • undefined for invalid input
Type
HTMLElement | undefined

(static) getAttribute(element, attributeName) → {string|null|undefined}

Get an attribute value from a DOM element.

Description:

  • Get an attribute value from a DOM element.

Example
getAttribute(el, "id") => "header"

getAttribute(el, "data-id") => "123"

getAttribute(el, "unknown") => null

getAttribute(null, "id") => undefined
Parameters:
Name Type Description
element *

The target DOM element
attributeName *

The attribute name
Returns:

Returns:

  • string if attribute exists
  • null if attribute does not exist
  • undefined for invalid input
Type
string | null | undefined

(static) getElementById(elementId) → {HTMLElement|null|undefined}

Get a DOM element by its ID.

Description:

  • Get a DOM element by its ID.

Example
getElementById("header") => HTMLElement

getElementById("unknown") => null

getElementById() => undefined

getElementById(123) => undefined
Parameters:
Name Type Description
elementId *

The unique ID of the DOM element
Returns:

Returns:a

  • HTMLElement if found
  • null if not found
  • undefined for invalid input
Type
HTMLElement | null | undefined

(static) getElementsByClassName(className) → {HTMLCollection|undefined}

Get DOM elements by class name.

Description:

  • Get DOM elements by class name.

Example
getElementsByClassName("card") => HTMLCollection

getElementsByClassName("unknown") => HTMLCollection (empty)

getElementsByClassName("") => undefined

getElementsByClassName(123) => undefined
Parameters:
Name Type Description
className *

The class name to search for
Returns:

Returns:

  • HTMLCollection (may be empty)
  • undefined for invalid input
Type
HTMLCollection | undefined

(static) getElementsByTagName(tagName) → {HTMLCollection|undefined}

Get DOM elements by tag name.

Description:

  • Get DOM elements by tag name.

Example
getElementsByTagName("div") => HTMLCollection

getElementsByTagName("unknown") => HTMLCollection (empty)

getElementsByTagName("") => undefined

getElementsByTagName(null) => undefined
Parameters:
Name Type Description
tagName *

The HTML tag name to search for
Returns:

Returns:

  • HTMLCollection (may be empty)
  • undefined for invalid input
Type
HTMLCollection | undefined

(static) getFavicon() → {string|undefined}

Get the current browser tab favicon URL.

Description:

  • Get the current browser tab favicon URL.

Example
getFavicon() => "https://example.com/favicon.ico"

getFavicon() => undefined
Returns:

Returns:

  • string (favicon URL) if exists
  • undefined if favicon is not set
Type
string | undefined

(static) getTabTitle() → {string}

Get the current browser tab title.

Description:

  • Get the current browser tab title.

Example
getTabTitle() => "Home"
Returns:

Returns the current tab title

Type
string

(static) hasClass(element, className) → {boolean|undefined}

Check if a DOM element has a specific class.

Description:

  • Check if a DOM element has a specific class.

Example
hasClass(el, "active") => true

hasClass(el, "hidden") => false

hasClass(null, "active") => undefined
Parameters:
Name Type Description
element *

The target DOM element
className *

The class name to check
Returns:

Returns:

  • true if the element has the class
  • false if the element does not have the class
  • undefined for invalid input
Type
boolean | undefined

(static) headTags(tagName, propertyObj) → {HTMLElement|undefined}

Create a tag (script, link, etc.) and append it to the document head.

Description:

  • Create a tag (script, link, etc.) and append it to the document head.

Example
headTags("script", { src: "/app.js", type: "module" });

headTags("link", { href: "/style.css", rel: "stylesheet" });
Parameters:
Name Type Description
tagName *

The HTML tag name (e.g., "script", "link")
propertyObj *

Optional object of properties to assign (like src, href, type, rel)
Returns:

Returns:

  • The created and appended tag element
  • undefined for invalid input
Type
HTMLElement | undefined

(static) onElementLoad(element, handler) → {boolean|undefined}

Call a handler when the element is available or when the document is loaded.

Description:

  • Call a handler when the element is available or when the document is loaded.

Example
onElementLoad(null, () => console.log("DOM fully loaded"));

onElementLoad(button, () => console.log("Button is ready"));
Parameters:
Name Type Description
element *

The target DOM element. If null/undefined, uses document.
handler *

The function to execute when ready
Returns:

Returns:

  • true if the listener was added successfully
  • undefined for invalid input
Type
boolean | undefined

(static) removeAttribute(element, attributeName) → {boolean|undefined}

Remove an attribute from a DOM element.

Description:

  • Remove an attribute from a DOM element.

Example
removeAttribute(el, "disabled") => true

removeAttribute(el, "data-id") => true

removeAttribute(null, "id") => undefined
Parameters:
Name Type Description
element *

The target DOM element
attributeName *

The attribute name
Returns:

Returns:

  • true if removal was attempted
  • undefined for invalid input
Type
boolean | undefined

(static) removeClass(element, className) → {string|undefined}

Remove a class from a DOM element if it exists.

Description:

  • Remove a class from a DOM element if it exists.

Example
removeClass(el, "active") => "active"

removeClass(el, "") => undefined

removeClass(null, "active") => undefined
Parameters:
Name Type Description
element *

The target DOM element
className *

The class name to remove
Returns:

Returns:

  • string (class name removed or already absent) on success
  • undefined for invalid input
Type
string | undefined

(static) removeElement(child, parent) → {HTMLElement|undefined}

Remove a child element from a parent, or from the DOM if parent is not provided.

Description:

  • Remove a child element from a parent, or from the DOM if parent is not provided.

Example
removeElement(child, document.getElementById("container"));

removeElement(child) => removes directly from the DOM
Parameters:
Name Type Description
child *

The DOM element to remove
parent *

Optional parent DOM element
Returns:

Returns:

  • The removed element on success
  • undefined for invalid input
Type
HTMLElement | undefined

(static) removeEventListenerHelper(element, type, handler) → {boolean|undefined}

Remove an event listener from a DOM element.

Description:

  • Remove an event listener from a DOM element.

Example
removeEventListenerHelper(button, "click", handleClick);
Parameters:
Name Type Description
element *

The target DOM element
type *

The event type (e.g., "click", "input")
handler *

The event handler function to remove
Returns:

Returns:

  • true if the listener was removed successfully
  • undefined for invalid input
Type
boolean | undefined

(static) setAttribute(element, attributeName, attributeValue) → {string|undefined}

Add or update an attribute on a DOM element.

Description:

  • Add or update an attribute on a DOM element.

Example
setAttribute(el, "id", "header") => "header"

setAttribute(el, "data-id", "123") => "123"

setAttribute(el, "disabled", "") => ""

setAttribute(null, "id", "x") => undefined
Parameters:
Name Type Description
element *

The target DOM element
attributeName *

The attribute name
attributeValue *

The attribute value
Returns:

Returns:

  • string (attribute value) on success
  • undefined for invalid input
Type
string | undefined

(static) setDataId(element, value) → {string|undefined}

Set a data-id attribute on a DOM element.

Description:

  • Set a data-id attribute on a DOM element.

Example
setDataId(button, "123"); // returns "123"

setDataId(null, "123"); // returns undefined
Parameters:
Name Type Description
element *

The target DOM element
value *

The value to set for data-id
Returns:

Returns:

  • The value set on data-id
  • undefined for invalid input
Type
string | undefined

(static) setFavicon(faviconUrl) → {string|undefined}

Set or update the browser tab favicon.

Description:

  • Set or update the browser tab favicon.

Example
setFavicon("/favicon.ico") => "/favicon.ico"

setFavicon("") => undefined

setFavicon(null) => undefined
Parameters:
Name Type Description
faviconUrl *

The favicon URL
Returns:

Returns:

  • string (favicon URL) on success
  • undefined for invalid input
Type
string | undefined

(static) setHTMLContent(element, html) → {string|undefined}

Set HTML content for a DOM element.

Description:

  • Set HTML content for a DOM element.

Example
setHTMLContent(el, "<b>Hello</b>") => "<b>Hello</b>"

setHTMLContent(el, "") => ""

setHTMLContent(null, "<p>Hi</p>") => undefined
Parameters:
Name Type Description
element *

The target DOM element
html *

The HTML string to set
Returns:

Returns:

  • string (HTML content) on success
  • undefined for invalid input
Type
string | undefined

(static) setStyle(element, property, value) → {string|undefined}

Set a CSS style property on a DOM element.

Description:

  • Set a CSS style property on a DOM element.

Example
setStyle(el, "color", "red") => "red"

setStyle(el, "backgroundColor", "yellow") => "yellow"

setStyle(null, "color", "red") => undefined
Parameters:
Name Type Description
element *

The target DOM element
property *

The CSS property name (camelCase)
value *

The CSS value to apply
Returns:

Returns:

  • string (value applied) on success
  • undefined for invalid input
Type
string | undefined

(static) setStyles(element, stylesObj) → {object|undefined}

Apply multiple CSS styles to a DOM element.

Description:

  • Apply multiple CSS styles to a DOM element.

Example
setStyles(div, { color: "red", backgroundColor: "yellow", fontSize: "16px" });
Parameters:
Name Type Description
element *

The target DOM element
stylesObj *

An object of CSS properties and values (camelCase)
Returns:

Returns:

  • The applied styles object on success
  • undefined for invalid input
Type
object | undefined

(static) setTabTitle(title) → {string|undefined}

Set the browser tab title.

Description:

  • Set the browser tab title.

Example
setTabTitle("Home") => "Home"

setTabTitle("") => undefined

setTabTitle(null) => undefined
Parameters:
Name Type Description
title *

The title to set for the browser tab
Returns:

Returns:

  • string (new title) on success
  • undefined for invalid input
Type
string | undefined

(static) setTextContent(element, content) → {string|undefined}

Set text content for a DOM element.

Description:

  • Set text content for a DOM element.

Example
setTextContent(el, "Hello") => "Hello"

setTextContent(el, "") => ""

setTextContent(null, "Hi") => undefined
Parameters:
Name Type Description
element *

The target DOM element
content *

The text content to set
Returns:

Returns:

  • string (content) on success
  • undefined for invalid input
Type
string | undefined

(static) toggleClass(element, className) → {string|undefined}

Toggle a class on a DOM element.

Description:

  • Toggle a class on a DOM element.

Example
toggleClass(el, "active") => "active"

toggleClass(el, "") => undefined

toggleClass(null, "active") => undefined
Parameters:
Name Type Description
element *

The target DOM element
className *

The class name to toggle
Returns:

Returns:

  • string (class name toggled) on success
  • undefined for invalid input
Type
string | undefined