DOMEx

Extend DOM prototype to have a few utility methods.

Getting Started

Install via NPM

$ npm i @kirinnee/domex

or

Install via Yarn

$ yarn add @kirinnee/domex --prefer-offline

Using in browser

Attach scripts in dist/ folder

<script src="./dist/domex.min.js"></script>

Usage

DOMEx evil-ly extends prototype of HTMLElement and all its sub-classes. This gives us a variety of slightly useful method. Do note that DOMEx is only cross-platform is DOM4 Polyfill is installed.

Append

function Append(elements: HTMLElement|HTMLElement[]|string|string[]):HTMLElement

Appends the HTMLElement or text to the end of the target element.

let x = document.querySelector("#some-node");
//Append Element
x.Append(document.createElement("a"));
//Append Text
x.Append("HEY <div> HI! </div>");

Prepend

function Prepend(elements: HTMLElement|HTMLElement[]|string|string[]):HTMLElement

Prepends the HTMLElement or text to the start of the target element.

let x = document.querySelector("#some-node");
//Append Element
x.Prepend(document.createElement("a"));
//Append Text
x.Prepend("HEY <div> HI");

Add Class

function AddClass(cls: string|string[]):HTMLElement

Adds a or an array of classes to the element.

//Add single class "blue-class"
x.AddClass("blue-class");
//Add multiple classes
x.AddClass(["blue-class","red-class","green-class"]);

Remove Class

function RemoveClass(cls:string|string[]):HTMLElement

Removes a or an array of classes to the element.

//Remove 1 class
x.RemoveClass('blue-class');
//Remove multiple classes
x.RemoveClass(["blue-class","red-class","green-class"]);

Setting Attribute

function Attr(attr:string, value:string):HTMLElement

Adds or change an attribute of the element

x.Attr('id','complex-identifier');

Accessing Attribute

function Attr(attr:string):string

Access the value of certain attribute

let id:string = x.Attr('id');

Setting Styles

function Style(attr:string, value:string): HTMLElement

Set the style of certain attribute

x.Style('color','blue');

Getting Styles

function Style(attr:string): string

Access the value of the style

let color:string = x.Style('color');

Setting the ID of the element

function Id(value:string): HTMLElement

Sets or changes the ID of the target element

x.Id("complex-identifier");

Access the ID of the element

function Id(): string

Gets the value of the ID of the element

let id = x.Id();

Adding Click Listener

Click(listener: ClickListener): HTMLElement;

Adds a click listener to the element

//Display which mouse button was use to click
x.Click( (button:number, e:MouseEvent) => console.log(button));

Adding Wheel Listener

WheelDown(listener: WheelListener): HTMLElement

WheelUp(listener: WheelListner): HTMLElement

//print to console how much has the user wheel-down
x.WheelDown((delta:number, e:WheelEvent) => console.log(delta));
//print to console how much has the user wheel-up
x.WheelUp((delta:number, e:WheelEvent) => console.log(delta));

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• kirinnee

License

This project is licensed under MIT - see the LICENSE.md file for details