DOMiNodes is a DOM manipulation library written entirely in JavaScript. It enables users to traverse the DOM, selecting and modifying node elements on the fly. Take a look below for the DOMiNodes API features.

Towers of Hanoi Live Demo

Public API

• selector()
• html()
• empty()
• attr()
• addClass()
• removeClass()
• append()
• children()
• parent()
• find()
• remove()
• on()
• off()
• ajax()

$d (selector)

Creates and returns a DOMiNodes Object

Selecting DOM Elements

$d("div.class");

Wrapping HTML Elements

const newDiv = document.createElement("div");
$d(newDiv)

Queue callbacks to run when DOM Content has finished loading

$d(() => alert("content has loaded!"));

DOMiNodes Methods

html(string)

Sets the inner HTML of all selected elements

<p class="paragraph"></p>

⬇️

$d("p.paragraph").html("hello world");

⬇️

<p class="paragraph">hello world</p>

Returns the inner HTML of the first element in a collection

<p class="paragraph">hello world</p>

⬇️

$d("p.paragraph").html("hello world");
//-> "hello world"

empty()

Deletes all child elements of the collection elements

<ul class="emptyMe">
  <li>Hello</li>
  <li>World</li>
</ul>

⬇️

$d("ul.emptyMe").empty();

⬇️

<ul class="emptyMe">
</ul>

attr(attributeName, value)

Gets value of attribute for first Element in colllection OR sets value for attribute of all elements in collection

<img src="" alt="hello">
<img src="" alt="">
<img src="" alt="">

⬇️

$d("img").attr("alt");
//-> "hello"
$d("img").attr("alt", "goodbye");

⬇️

<img src="" alt="goodbye">
<img src="" alt="goodbye">
<img src="" alt="goodbye">

addClass(className)

Adds a class name to every element in the collection

<div class="hello"></div>
<div class="hello"></div>

⬇️

$d("div.hello").addClass("world");

⬇️

<div class="hello world"></div>
<div class="hello world"></div>

removeClass(className)

Removes a class name from every element in the collection

<div class="hello world"></div>
<div class="hello world"></div>

⬇️

$d("div.hello").removeClass("hello");

⬇️

<div class="world"></div>
<div class="world"></div>

append(content)

Appends content to every element of the collection in accordance to type of input content given

<p></p>
<p></p>
<p></p>

⬇️

$d("p").append("hello");

⬇️

<p>hello</p>
<p>hello</p>
<p>hello</p>

⬇️

$d("p").append(document.createElement("div"));

⬇️

<p>hello<div></div></p>
<p>hello<div></div></p>
<p>hello<div></div></p>

children()

Returns a new collection containing the child elements of the elements in the original collection.

<ul>
  <li></li>
  <li></li>
</ul>

⬇️

$d("ul").children();
//<li></li>
//<li></li>

parent()

<div>
  <p></p>
</div>

⬇️

$d("p").parent();
//<div></div>

find(selector)

Searches all elements in the collection for children that match the input selector.

<div>
  <p class="hello"></p>
  <section></section>
  <aside class="side"></aside>
</div>

⬇️

$d("div").find("aside.side");
//<aside class="side"></aside>

remove()

Removes all elements of the collection from the DOM and empties the collection.

<div>
  <p></p>
  <section></section>
</div>

⬇️

$d("div").remove();

⬇️

on(eventType, callback)

Adds an event listener with the given type and callback to all elements of the collection

$d("button.hello").on("click", () => alert("hello"));

off(eventType)

Removes the event listeners for a given type from all elements of the collection

$d("button.hello").off("click");

ajax({options})

Used to make an ajax request to an external source. Example:

$d.ajax({
  url: "http://www.coolapi.com/posts",
  method: "GET",
  success: () => alert("success!"),
  error: () => alert("oh no!"),
  data: { code: 1234 }
})