📦 Kotipalli Phaneendra Kumar - DOM Utilities

A lightweight, safe, and predictable DOM utility module that simplifies common DOM operations with strict validation, consistent return values, and clean JSDoc documentation.

Designed specifically for browser environments, this module helps you work confidently with elements, attributes, classes, styles, events, and dynamic DOM creation without unexpected runtime errors.

✨ Highlights

• 🧱 Safe DOM selectors with validation
• 🏷️ Attribute helpers (get / set / remove)
• 🧩 Class utilities (add / remove / toggle / check)
• 🎨 Style helpers (single & multiple styles)
• 🧩 Dynamic element creation & DOM insertion
• 🎧 Event listener helpers
• ⭐ Tab title & favicon utilities
• 📚 Fully documented using JSDoc
• ⚡ Predictable return values (undefined for invalid input)

📦 Installation

npm install phane-tech-dom-utils

🚀 Import

import {
  getElementById,
  getElementsByClassName,
  getElementsByTagName,
  setTabTitle,
  getTabTitle,
  setFavicon,
  getFavicon,
  setTextContent,
  setHTMLContent,
  setAttribute,
  getAttribute,
  removeAttribute,
  hasClass,
  addClass,
  removeClass,
  toggleClass,
  setStyle,
  setStyles,
  createDynamicElement,
  appendDynamicTag,
  removeElement,
  addEventListenerHelper,
  removeEventListenerHelper,
  onElementLoad,
  setDataId
} from "phane-tech-dom-utils";

📚 API Reference

🔍 getElementById(id)

Safely returns a DOM element by its ID.

getElementById("header"); // HTMLElement | null
getElementById("unknown"); // null
getElementById(""); // undefined

🔍 getElementsByClassName(className)

Returns a live HTMLCollection of elements.

getElementsByClassName("card"); // HTMLCollection

🔍 getElementsByTagName(tagName)

Returns a live HTMLCollection of elements.

getElementsByTagName("div"); // HTMLCollection

🏷️ setTabTitle(title)

Sets the browser tab title.

setTabTitle("Home"); // "Home"

⭐ getTabTitle()

Returns the current tab title.

getTabTitle(); // "Home"

⭐ setFavicon(url)

Sets or updates the browser favicon.

setFavicon("/favicon.ico");

⭐ getFavicon()

Returns the current favicon URL if available.

getFavicon(); // string | undefined

✏️ setTextContent(element, text)

Safely sets innerText on an element.

setTextContent(el, "Hello World");

✏️ setHTMLContent(element, html)

Safely sets innerHTML on an element.

setHTMLContent(el, "<b>Hello</b>");

🧱 setAttribute(element, name, value)

Adds or updates an attribute.

setAttribute(el, "data-id", "123");

🧱 getAttribute(element, name)

Gets an attribute value.

getAttribute(el, "data-id"); // "123"

🧱 removeAttribute(element, name)

Removes an attribute.

removeAttribute(el, "disabled");

🧩 hasClass(element, className)

Checks if a class exists on an element.

hasClass(el, "active"); // true | false

🧩 addClass / removeClass / toggleClass

Manages element classes safely.

addClass(el, "active");
removeClass(el, "active");
toggleClass(el, "active");

🎨 setStyle(element, property, value)

Sets a single CSS style.

setStyle(el, "color", "red");

🎨 setStyles(element, styles)

Applies multiple CSS styles at once.

setStyles(el, {
  color: "red",
  backgroundColor: "yellow"
});

🧩 createDynamicElement(tag, content?, props?)

Creates a DOM element dynamically.

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

➕ appendDynamicTag(child, parent?)

Appends an element to the DOM.

appendDynamicTag(div);
appendDynamicTag(div, container);

❌ removeElement(child, parent?)

Removes an element from the DOM.

removeElement(div);

🎧 addEventListenerHelper(el, type, handler)

Adds an event listener safely.

addEventListenerHelper(btn, "click", handleClick);

🎧 removeEventListenerHelper(el, type, handler)

Removes an event listener safely.

removeEventListenerHelper(btn, "click", handleClick);

⏳ onElementLoad(element?, handler)

Executes a handler when DOM or element is ready.

onElementLoad(null, () => console.log("DOM Ready"));

🆔 setDataId(element, value)

Sets data-id attribute.

setDataId(el, "123");

🧪 Design Principles

• ❌ Invalid input → undefined
• ✅ Safe DOM access
• 🔁 No unexpected mutations
• 📖 Predictable, documented behavior

📄 License

MIT

🔗 Links

• GitHub Repository: https://github.com/phane-tech/phane-tech-dom-utilities
• Demo / Documentation: https://phane-tech.github.io/phane-tech-dom-utilities/module-DomHelpers.html
• Unit Test Cases Reports: https://phane-tech.github.io/phane-tech-dom-utilities/unit-test-report.html