stardom's Introduction

starDOM

A lightweight DOM manipulation library that includes AJAX requests and event handling.

Javascript Objects

starDOM's $s can be passed an HTML element or a CSS selector to create a Javascript object with increased functionality.

  let $newElement = $s("<section/>")

When passed a function, starDOM will invoke said function when the DOM is fully loaded.

  $s(() => console.log("To infinity... and beyond!"));

Public API

html

Get and Set innerHTML.

//get
  $newElement.html()

//set
  $newElement.html("To infinity... and beyond!")

append

Add child elements.

  $newElement.append(children)

addClass

Add a CSS class.

  $newElement.addClass(className)

removeClass

Remove CSS class.

  $newElement.removeClass(className)

attr

Get and Set attributes.

//get
  $newElement.attr(attrName)

//set
  $newElement.attr(attrName, value)

children

Get children.

  $newElement.children()

parent

Get parent.

  $newElement.parent()

find

Find by selector.

  $newElement.find(selector)

empty

Clear innerHTML.

  $newElement.empty()

off

Remove event listener.

  $newElement.off("eventName", callback)

on

Add event listener.

  $newElement.on("eventName", callback)

remove

Remove from DOM.

  $newElement.remove()

AJAX

starDOM uses XMLHttpRequests for it's ajax method.

  $s.ajax({
      method: "GET",
      url: "https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY",

      success: function (data) {
        console.log("To infinity... and beyond!");
      },
      error: function (data) {
        console.log("I'm sorry Dave.  I'm affraid I can't do that.");
      }
  });

Recommend Projects