Pure JavaScript DOM utility functions
npm install phane-tech-dom-utilsundefined for invalid input)
bash
npm install phane-tech-dom-utils
`
---
🚀 Import
`js
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
$3
Safely returns a DOM element by its ID.
`js
getElementById("header"); // HTMLElement | null
getElementById("unknown"); // null
getElementById(""); // undefined
`
---
$3
Returns a live HTMLCollection of elements.
`js
getElementsByClassName("card"); // HTMLCollection
`
---
$3
Returns a live HTMLCollection of elements.
`js
getElementsByTagName("div"); // HTMLCollection
`
---
$3
Sets the browser tab title.
`js
setTabTitle("Home"); // "Home"
`
---
$3
Returns the current tab title.
`js
getTabTitle(); // "Home"
`
---
$3
Sets or updates the browser favicon.
`js
setFavicon("/favicon.ico");
`
---
$3
Returns the current favicon URL if available.
`js
getFavicon(); // string | undefined
`
---
$3
Safely sets innerText on an element.
`js
setTextContent(el, "Hello World");
`
---
$3
Safely sets innerHTML on an element.
`js
setHTMLContent(el, "Hello");
`
---
$3
Adds or updates an attribute.
`js
setAttribute(el, "data-id", "123");
`
---
$3
Gets an attribute value.
`js
getAttribute(el, "data-id"); // "123"
`
---
$3
Removes an attribute.
`js
removeAttribute(el, "disabled");
`
---
$3
Checks if a class exists on an element.
`js
hasClass(el, "active"); // true | false
`
---
$3
Manages element classes safely.
`js
addClass(el, "active");
removeClass(el, "active");
toggleClass(el, "active");
`
---
$3
Sets a single CSS style.
`js
setStyle(el, "color", "red");
`
---
$3
Applies multiple CSS styles at once.
`js
setStyles(el, {
color: "red",
backgroundColor: "yellow"
});
`
---
$3
Creates a DOM element dynamically.
`js
createDynamicElement("div", "Hello", {
id: "box",
className: "card"
});
`
---
$3
Appends an element to the DOM.
`js
appendDynamicTag(div);
appendDynamicTag(div, container);
`
---
$3
Removes an element from the DOM.
`js
removeElement(div);
`
---
$3
Adds an event listener safely.
`js
addEventListenerHelper(btn, "click", handleClick);
`
---
$3
Removes an event listener safely.
`js
removeEventListenerHelper(btn, "click", handleClick);
`
---
$3
Executes a handler when DOM or element is ready.
`js
onElementLoad(null, () => console.log("DOM Ready"));
`
---
$3
Sets data-id attribute.
`js
setDataId(el, "123");
``