defaultjs-extdom

** Table of Contents **

• defaultjs-extdom
  • Intro
  • How to install
    • Browser
    • Nodejs/NPM
  • API Documentation
    • additional query support
      • pseudo selector :parent(selector)
      • find(selector [, selector, ...])
      • is(selector [, selector, ...])
      • parent(selector, ignoreShadowRoot)
      • parents(selector)
      • selector()
    • additional attribute support
      • attr(name, value)
    • additional class support
      • addClass(classname [, classname, ...])
      • removeClass(classname [, classname, ...])
      • toggleClass(classname [, classname, ...])
    • additional event support
      • on(eventname, callback, option)
      • removeOn(callback, eventname, capture)
      • trigger(event [,delegateEvent] [, data])
    • additional manipulation support
      • empty()
      • content()
      • html(option)
      • append(option)
      • preppend(option)
      • replace(a [, b])
      • after(element)
      • before(element)
    • show / hide support
      • show()
      • hide()
      • toggleShow()
    • Extended functiality of NodeList and HTMLCollection
      • forEach((element, index)=>{})
      • map((element)=>{})
      • filter((element)=>{})
      • first()
      • last()
      • delegate function call
  • License

Intro

This lib extents the browser dom api, provide sorter function names and easier solution to process data.

How to install

Browser

<script type="text/javascript" src="defaultjs-extdom.min.js"></script>

Nodejs/NPM

npm install @default-js/defaultjs-extdom@latest

API Documentation

additional query support

pseudo selector :parent(selector)

This pseudo selector provide the capability to select a parent. It can be combined with with all other selectors. The pseudo selector works in find, parent and parents, only.

Param	Required	Default	Description
selector			one or more standard selector query

element.find("div :parent()");
// the same like
find("div").first().parent();

element.find("div :parent(body)");
// the same like
find("div").first().parent("body");

find(selector [, selector, ...])

sort function for querySelectorAll.

Param	Required	Default	Description
selector	x		one or more standard selector query

@return NodeList

find("div");
// is the same like
document.querySelectorAll("div");

element.find("div")
// is the same like
element.querySelectorAll("div");

is(selector [, selector, ...])

sort function for matches.

Param	Required	Default	Description
selector	x		one or more standard selector query

@return boolean

const div = document.querySelectorAll("div");
div.is("div");
// is the same like
div.matches("div");

parent(selector, ignoreShadowRoot)

This function provide a parent element by a selector

Param	Required	Default	Description
selector			standard selector query
ignoreShadowRoot		false	experimentel

@return element or null

element.parent() == element.parentElement;
element.parent("body") == document.body;
element.parent("div"); // result: first parent div element

parents(selector)

This function provide a NodeList with all parents of element by a selector

Param	Required	Default	Description
selector			standard selector query

@return NodeList

element.parents(); // result: all parent elements
element.parents("div"); // result: all parent div element

selector()

This function return the selector by current element.

Param	Required	Default	Description

@return string

element.selector(); // result: the selector of element
// body -> div -> span
span.selector(); // result: div -> span

additional attribute support

attr(name, value)

This function provide the capability to get and set an attribute. Sort for getAttribute, setAttribute and removeAttribute.

Param	Required	Default	Description
name			attribute name
value			attribute value

@return object, string or undefined

element.attr(); // return an object with all attributes as properties
element.attr("id"); // return the value of attribute name; 
//the same like 
element.getAttribute("id");

element.attr("id", "value"); // set attribute with given value
//the same like 
element.setAttribute("id", "value");

element.attr("id", undefined); // remove the attribute
element.attr("id", null); // remove the attribute
//the same like 
element.removeAttribute("id");

additional class support

addClass(classname [, classname, ...])

This function add classname(s). Same like classList.add(classname).

Param	Required	Default	Description
classname			one or more classname

Info: Classname can also be a string of space-sapareted classnames

element.addClass("class"); 
element.addClass("class-1 class-2"); 
element.addClass("class-1", "class-2"); 
element.addClass("class-1 class-2", "class-3"); 
element.addClass("class-1 class-2", "class-3 class-4"); 

removeClass(classname [, classname, ...])

This function remove classname(s). Same like classList.remove(classname).

Param	Required	Default	Description
classname			one or more classname

Info: Classname can also be a string of space-sapareted classnames

element.removeClass("class"); 
element.removeClass("class-1 class-2"); 
element.removeClass("class-1", "class-2"); 
element.removeClass("class-1 class-2", "class-3"); 
element.removeClass("class-1 class-2", "class-3 class-4"); 

toggleClass(classname [, classname, ...])

This function toggle classname(s). Same like classList.toggle(classname). It add or remove classname(s), depends on if classname präsent or not.

Param	Required	Default	Description
classname			one or more classname

Info: Classname can also be a string of space-sapareted classnames

element.toggleClass("class"); 
element.toggleClass("class-1 class-2"); 
element.toggleClass("class-1", "class-2"); 
element.toggleClass("class-1 class-2", "class-3"); 
element.toggleClass("class-1 class-2", "class-3 class-4"); 

additional event support

on(eventname, callback, option)

This function is sort for addEventListener and provide more functions

Param	Required	Default	Description
eventname	x		string or array of event name(s)
callback	x		function
option			boolean for capture event or object like { capture: false, once: false, passive: false }

Info: eventname can also be a string of space-sapareted event names

element.on("click", (event) => {});
element.on("click focus", (event) => {});
element.on(["click","focus"], (event) => {});
element.on("click", (event) => {}, true);
element.on("click", (event) => {}, { capture: true, once: true, passive: true });

removeOn(callback, eventname, capture)

This function is sort for removeEventListener.

Param	Required	Default	Description
callback	x		function
eventname			string or array of event name(s)
capture			boolean

const handle = (event) => {};
element.on("click", handle);
element.on("click focus", handle);

element.removeOn(handle, "click"); //removes handle only for click event
element.removeOn(handle, "fokus");//removes handle only for click event

element.on("click focus", handle);
element.removeOn(handle);//removes handle for all events

trigger(event [,delegateEvent] [, data])

This function is sort for removeEventListener.

Param	Required	Default	Description
event	x		function
delegateEvent			event to be delegate data

element.trigger("click");
element.trigger("click", {name: "my-data"});

element.on("click", (event) => {
  element.trigger("change", event);
  element.trigger("change", event, {name: "my-data"});
});

additional manipulation support

empty()

This function removes all nodes of element.

Param	Required	Default	Description

element.empty();

content()

This function equal to childNodes.

Param	Required	Default	Description

element.content() == event.childNodes;

html(option)

Param	Required	Default	Description
option			boolean, string, Node, NodeList or HTMLCollection

• option is not set, undefined, null or false

  The function returns the inner html like innerHtml

• option is true

  The function returns the outer html like outerHtml

• option is string, Node, NodeList or HTMLCollection

  The function cleanup content and append option.

element.html();
element.html(true);
element.html("<div></div>");
element.html(otherElement);
element.html(nodeList);
element.html(htmlCollection);

append(option)

This function append element(s).

Param	Required	Default	Description
option			string, Node, NodeList or HTMLCollection

element.append("<div></div>");
element.append(otherElement);
element.append(nodeList);
element.append(htmlCollection);

preppend(option)

This function preppend element(s).

Param	Required	Default	Description
option			string, Node, NodeList or HTMLCollection

element.preppend("<div></div>");
element.preppend(otherElement);
element.preppend(nodeList);
element.preppend(htmlCollection);

replace(a [, b])

This function repace a element.

Param	Required	Default	Description
a	x		Node
b			Node

element.replace(otherElement); // element would be replaced by otherElement
parent.preppend(elementA, elementB);// elementA must be child of parent, than elementA would be replaced by elementB

after(element)

This function insert element after.

Param	Required	Default	Description
element	x		string, Node, NodeList or HTMLCollection

element.after("<div></div>");
element.after(otherElement);
element.after(nodeList);
element.after(htmlCollection);

before(element)

This function insert element before.

Param	Required	Default	Description
element	x		string, Node, NodeList or HTMLCollection

element.before("<div></div>");
element.before(otherElement);
element.before(nodeList);
element.before(htmlCollection);

show / hide support

show()

This function showing an element.

Param	Required	Default	Description

element.show();

hide()

This function hiding an element.

Param	Required	Default	Description

element.hide();

toggleShow()

This function switching between show() and hide()

Param	Required	Default	Description

element.toggleShow();

Extended functiality of NodeList and HTMLCollection

Both classes NodeList and HTMLCollection has more funtionality by adding same functions of Array and more.

forEach((element, index)=>{})

See Array.prototype.foreach;

map((element)=>{})

See Array.prototype.map;

filter((element)=>{})

See Array.prototype.filter;

first()

Retures the first element.

Param	Required	Default	Description

nodeList.first();
find("div").first(); //find returns a NodeList with all div's and by .first() returns only the first element

last()

Retures the last element.

Param	Required	Default	Description

nodeList.last();
find("div").first(); //find returns a NodeList with all div's and by .last() returns only the last element

delegate function call

At NodeList and HTMLCollection you can call any function of HTMLElement and HTMLInputElement except functions there availabe on NodeList or HTMLCollection.

nodeList.show();
// same like
for(element of nodeList)
  element.show();

License

MIT