DOM Manupu

Document manupulation using vanila javascript

Get Started

Install DOM Manupu to your project.

pnpm install dom-manupu

Api

Import statement DOM Manupu

import DOM form "dom-manupu";

Select

Select A Element Using Class

const $box = new DOM(".box");

Select A Element Using Id

const $box = new DOM("#box");

Create

Create Element

const $box = DOM.create("box");

Create Text

const $name = DOM.createTxt("hello");

Attribute

Set Attribute

$body.attr("hello", "world");

Set Multiple Attributes

$body.attr({ id: "001" });

Get Attribute Value

$body.attr("hello");

Style Sheet

Set Style

$body.attr("width", "10rem");

Set Multiple Styles

$body.attr({ height: "15rem" });

Get Style Value

$body.attr("width");

Vi

Show A Element

$body.show();

Hide A Element

$body.hide();

Event Listener

const $button = DOM.create("button");
$button.on("click", () => console.log("Clicked"));

Get Parent Parent

$box.parent();

Remove Element

$box.remove();

Replace Element

const $container = DOM.create("div");
$box.replace($container);

Children

Add A Children

$body.child([document.createElement("div")]);

Add Multipe Childrens

$body.child([DOM.create("div"), $box]);

Get Childrens

$body.child();

HTML

Get HTML

$body.html();

Set HTML

$body.html("<h1>Hello</h1>");

Text

Get Text

$body.txt();

Set Text

$body.txt("Hello");