Manipulated DOM

Document manupulation using vanila javascript.

Get Started

Install Manipulated DOM to your project.

pnpm install manipulated-dom

Examples

Import statement Manipulated DOM

import MDom form "manipulated-dom";

Select

Select A Element Using Class

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

Select A Element Using Id

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

Create

Create Element

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

Create Text

const $name = MDom.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 = MDom.create("button");
$button.on("click", () => console.log("Clicked"));

Get Parent Parent

$box.parent();

Remove Element

$box.remove();

Replace Element

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

Children

Add A Children

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

Add Multipe Childrens

$body.child([MDom.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");