element-manager

element-manager is a utility class for DOM manipulation and event handling. It provides a chainable API to simplify working with HTML elements.

Installation

You can install element-manager via npm:

npm install element-manager

Usage

Importing the Class

To use element-manager, you need to import it into your project:

import ElementManager from "element-manager";

Creating an Instance

You can create an instance of element-manager by passing a CSS selector string or an HTML element:

// Using a CSS selector
const elementManager = new ElementManager("#my-element");

// Using an HTML element
const element = document.getElementById("my-element");
const elementManager = new ElementManager(element);

Methods

addClass(className: string): this

Adds a class to the selected element.

elementManager.addClass("active");

removeClass(className: string): this

Removes a class from the selected element.

elementManager.removeClass("inactive");

append(child: Element): this

Appends a child element to the selected element.

const newDiv = document.createElement("div");
elementManager.append(newDiv);

prepend(child: Element): this

Prepends a child element to the selected element.

const newSpan = document.createElement("span");
elementManager.prepend(newSpan);

insertHTML(position: InsertPosition, html: string): this

Inserts HTML at the specified position relative to the selected element.

elementManager.insertHTML("beforeend", "<p>Inserted HTML</p>");

getChildren(): Element[]

Returns an array of the selected element's children.

const children = elementManager.getChildren();
console.log(children);

getSiblings(): Element[]

Returns an array of the selected element's siblings.

const siblings = elementManager.getSiblings();
console.log(siblings);

remove(): this

Removes the selected element from the DOM.

elementManager.remove();

setTextContent(text: string): this

Sets the text content of the selected element.

elementManager.setTextContent("Updated Text");

setHTMLContent(html: string): this

Sets the HTML content of the selected element.

elementManager.setHTMLContent("<span>New HTML Content</span>");

getAttribute(attr: string): string | null

Gets the value of the specified attribute from the selected element.

const attrValue = elementManager.getAttribute("data-id");
console.log(attrValue);

setAttribute(attr: string, value: string): this

Sets the value of the specified attribute on the selected element.

elementManager.setAttribute("data-id", "123");

removeAttribute(attr: string): this

Removes the specified attribute from the selected element.

elementManager.removeAttribute("data-id");

on(eventType: EventType, callback: EventListenerOrEventListenerObject): this

Adds an event listener to the selected element.

elementManager.on("click", () => console.log("Element clicked"));

off(eventType: EventType, callback: EventListenerOrEventListenerObject): this

Removes an event listener from the selected element.

const clickHandler = () => console.log("Element clicked");
elementManager.on("click", clickHandler);
elementManager.off("click", clickHandler);

observe(callback: MutationCallback, options: MutationObserverInit = { childList: true, subtree: true }): this

Sets up a MutationObserver to watch for changes to the selected element.

elementManager.observe((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation);
  });
});

trigger(eventType: EventType): this

Dispatches an event of the specified type on the selected element.

elementManager.trigger("click");

cloneElement(deep: boolean = true): Element | null

Clones the element.

const clone = elementManager.cloneElement();
console.log(clone);

replaceWith(newElement: Element): this

Replaces the element with another element.

const newElement = document.createElement("div");
elementManager.replaceWith(newElement);

closest(selector: string): Element | null

Finds the closest ancestor that matches the given selector.

const closestParent = elementManager.closest(".parent-class");
console.log(closestParent);

matches(selector: string): boolean

Checks if the element matches the given selector.

const doesMatch = elementManager.matches(".active");
console.log(doesMatch);

toggleClass(className: string): this

Toggles a class on the element.

elementManager.toggleClass("hidden");

getComputedStyle(property: string): string | null

Gets the computed style of the element.

const color = elementManager.getComputedStyle("color");
console.log(color);

scrollIntoView(options?: ScrollIntoViewOptions): this

Scrolls the element into view.

elementManager.scrollIntoView({ behavior: "smooth" });

addEventDelegate(selector: string, eventType: EventType, callback: EventListenerOrEventListenerObject): this

Adds an event listener that delegates events to a child selector.

elementManager.addEventDelegate(".child", "click", (event) =>
  console.log("Child clicked"),
);

hasClass(className: string): boolean

Checks if the element has a specific class.

const hasActiveClass = elementManager.hasClass("active");
console.log(hasActiveClass);

getData(dataAttr: string): string | null

Gets the value of a data attribute.

const dataValue = elementManager.getData("id");
console.log(dataValue);

Example

Here's an example demonstrating the usage of ElementManager:

import ElementManager from "element-manager";

const elementManager = new ElementManager("#my-element");

elementManager
  .addClass("active")
  .removeClass("inactive")
  .append(document.createElement("div"))
  .prepend(document.createElement("span"))
  .insertHTML("beforeend", "<p>Inserted HTML</p>")
  .setTextContent("Updated Text")
  .setHTMLContent("<span>New HTML Content</span>")
  .on("click", () => console.log("Element clicked"))
  .observe((mutations) => {
    mutations.forEach((mutation) => {
      console.log(mutation);
    });
  })
  .scrollIntoView({ behavior: "smooth" });

console.log(elementManager.getChildren());
console.log(elementManager.getSiblings());
console.log(elementManager.cloneElement());
console.log(elementManager.closest(".parent-class"));
console.log(elementManager.matches(".active"));
console.log(elementManager.toggleClass("hidden"));
console.log(elementManager.getComputedStyle("color"));
console.log(elementManager.hasClass("active"));
console.log(elementManager.getData("id"));

License

This project is licensed under the MIT License.