phane-tech-dom-utils 1.0.3 → 1.0.4

package/README.md

@@ -1,322 +1,322 @@
-# 📦 Kotipalli Phaneendra Kumar - Array 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
-
-```bash
-npm install phane-js-dom-helpers
-```
----
-
-## 🚀 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-js-dom-helpers";
-```
-
----
-
-## 📚 API Reference
-
-### 🔍 getElementById(id)
-
-Safely returns a DOM element by its ID.
-
-```js
-getElementById("header"); // HTMLElement | null
-getElementById("unknown"); // null
-getElementById(""); // undefined
-```
-
----
-
-### 🔍 getElementsByClassName(className)
-
-Returns a live HTMLCollection of elements.
-
-```js
-getElementsByClassName("card"); // HTMLCollection
-```
-
----
-
-### 🔍 getElementsByTagName(tagName)
-
-Returns a live HTMLCollection of elements.
-
-```js
-getElementsByTagName("div"); // HTMLCollection
-```
-
----
-
-### 🏷️ setTabTitle(title)
-
-Sets the browser tab title.
-
-```js
-setTabTitle("Home"); // "Home"
-```
-
----
-
-### ⭐ getTabTitle()
-
-Returns the current tab title.
-
-```js
-getTabTitle(); // "Home"
-```
-
----
-
-### ⭐ setFavicon(url)
-
-Sets or updates the browser favicon.
-
-```js
-setFavicon("/favicon.ico");
-```
-
----
-
-### ⭐ getFavicon()
-
-Returns the current favicon URL if available.
-
-```js
-getFavicon(); // string | undefined
-```
-
----
-
-### ✏️ setTextContent(element, text)
-
-Safely sets innerText on an element.
-
-```js
-setTextContent(el, "Hello World");
-```
-
----
-
-### ✏️ setHTMLContent(element, html)
-
-Safely sets innerHTML on an element.
-```js
-setHTMLContent(el, "<b>Hello</b>");
-```
-
----
-
-### 🧱 setAttribute(element, name, value)
-
-Adds or updates an attribute.
-
-```js
-setAttribute(el, "data-id", "123");
-```
-
----
-
-### 🧱 getAttribute(element, name)
-
-Gets an attribute value.
-
-```js
-getAttribute(el, "data-id"); // "123"
-```
-
----
-
-### 🧱 removeAttribute(element, name)
-
-Removes an attribute.
-
-```js
-removeAttribute(el, "disabled");
-```
-
----
-
-### 🧩 hasClass(element, className)
-
-Checks if a class exists on an element.
-
-```js
-hasClass(el, "active"); // true | false
-```
-
----
-
-### 🧩 addClass / removeClass / toggleClass
-
-Manages element classes safely.
-
-```js
-addClass(el, "active");
-removeClass(el, "active");
-toggleClass(el, "active");
-```
-
----
-
-### 🎨 setStyle(element, property, value)
-
-Sets a single CSS style.
-
-```js
-setStyle(el, "color", "red");
-```
-
----
-
-### 🎨 setStyles(element, styles)
-
-Applies multiple CSS styles at once.
-
-```js
-setStyles(el, {
-  color: "red",
-  backgroundColor: "yellow"
-});
-```
----
-
-### 🧩 createDynamicElement(tag, content?, props?)
-
-Creates a DOM element dynamically.
-
-```js
-createDynamicElement("div", "Hello", {
-  id: "box",
-  className: "card"
-});
-```
-
----
-
-### ➕ appendDynamicTag(child, parent?)
-
-Appends an element to the DOM.
-
-```js
-appendDynamicTag(div);
-appendDynamicTag(div, container);
-```
----
-
-### ❌ removeElement(child, parent?)
-
-Removes an element from the DOM.
-
-```js
-removeElement(div);
-```
-
----
-
-### 🎧 addEventListenerHelper(el, type, handler)
-
-Adds an event listener safely.
-
-```js
-addEventListenerHelper(btn, "click", handleClick);
-```
-
----
-
-### 🎧 removeEventListenerHelper(el, type, handler)
-
-Removes an event listener safely.
-
-```js
-removeEventListenerHelper(btn, "click", handleClick);
-```
-
----
-
-### ⏳ onElementLoad(element?, handler)
-
-Executes a handler when DOM or element is ready.
-
-```js
-onElementLoad(null, () => console.log("DOM Ready"));
-```
-
-
----
-
-### 🆔 setDataId(element, value)
-
-Sets data-id attribute.
-
-```js
-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
-
+# 📦 Kotipalli Phaneendra Kumar - Array 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
+
+```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
+
+### 🔍 getElementById(id)
+
+Safely returns a DOM element by its ID.
+
+```js
+getElementById("header"); // HTMLElement | null
+getElementById("unknown"); // null
+getElementById(""); // undefined
+```
+
+---
+
+### 🔍 getElementsByClassName(className)
+
+Returns a live HTMLCollection of elements.
+
+```js
+getElementsByClassName("card"); // HTMLCollection
+```
+
+---
+
+### 🔍 getElementsByTagName(tagName)
+
+Returns a live HTMLCollection of elements.
+
+```js
+getElementsByTagName("div"); // HTMLCollection
+```
+
+---
+
+### 🏷️ setTabTitle(title)
+
+Sets the browser tab title.
+
+```js
+setTabTitle("Home"); // "Home"
+```
+
+---
+
+### ⭐ getTabTitle()
+
+Returns the current tab title.
+
+```js
+getTabTitle(); // "Home"
+```
+
+---
+
+### ⭐ setFavicon(url)
+
+Sets or updates the browser favicon.
+
+```js
+setFavicon("/favicon.ico");
+```
+
+---
+
+### ⭐ getFavicon()
+
+Returns the current favicon URL if available.
+
+```js
+getFavicon(); // string | undefined
+```
+
+---
+
+### ✏️ setTextContent(element, text)
+
+Safely sets innerText on an element.
+
+```js
+setTextContent(el, "Hello World");
+```
+
+---
+
+### ✏️ setHTMLContent(element, html)
+
+Safely sets innerHTML on an element.
+```js
+setHTMLContent(el, "<b>Hello</b>");
+```
+
+---
+
+### 🧱 setAttribute(element, name, value)
+
+Adds or updates an attribute.
+
+```js
+setAttribute(el, "data-id", "123");
+```
+
+---
+
+### 🧱 getAttribute(element, name)
+
+Gets an attribute value.
+
+```js
+getAttribute(el, "data-id"); // "123"
+```
+
+---
+
+### 🧱 removeAttribute(element, name)
+
+Removes an attribute.
+
+```js
+removeAttribute(el, "disabled");
+```
+
+---
+
+### 🧩 hasClass(element, className)
+
+Checks if a class exists on an element.
+
+```js
+hasClass(el, "active"); // true | false
+```
+
+---
+
+### 🧩 addClass / removeClass / toggleClass
+
+Manages element classes safely.
+
+```js
+addClass(el, "active");
+removeClass(el, "active");
+toggleClass(el, "active");
+```
+
+---
+
+### 🎨 setStyle(element, property, value)
+
+Sets a single CSS style.
+
+```js
+setStyle(el, "color", "red");
+```
+
+---
+
+### 🎨 setStyles(element, styles)
+
+Applies multiple CSS styles at once.
+
+```js
+setStyles(el, {
+  color: "red",
+  backgroundColor: "yellow"
+});
+```
+---
+
+### 🧩 createDynamicElement(tag, content?, props?)
+
+Creates a DOM element dynamically.
+
+```js
+createDynamicElement("div", "Hello", {
+  id: "box",
+  className: "card"
+});
+```
+
+---
+
+### ➕ appendDynamicTag(child, parent?)
+
+Appends an element to the DOM.
+
+```js
+appendDynamicTag(div);
+appendDynamicTag(div, container);
+```
+---
+
+### ❌ removeElement(child, parent?)
+
+Removes an element from the DOM.
+
+```js
+removeElement(div);
+```
+
+---
+
+### 🎧 addEventListenerHelper(el, type, handler)
+
+Adds an event listener safely.
+
+```js
+addEventListenerHelper(btn, "click", handleClick);
+```
+
+---
+
+### 🎧 removeEventListenerHelper(el, type, handler)
+
+Removes an event listener safely.
+
+```js
+removeEventListenerHelper(btn, "click", handleClick);
+```
+
+---
+
+### ⏳ onElementLoad(element?, handler)
+
+Executes a handler when DOM or element is ready.
+
+```js
+onElementLoad(null, () => console.log("DOM Ready"));
+```
+
+
+---
+
+### 🆔 setDataId(element, value)
+
+Sets data-id attribute.
+
+```js
+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
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phane-tech-dom-utils",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Pure JavaScript DOM utility functions",
   "type": "module",
   "main": "index.cjs",