Skip to content
No description, website, or topics provided.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
lib
README.md

README.md

starDOM

starDOM is a lightweight JavaScript library inspired by jQuery. By wrapping the browser's native DOM-manipulation API in simple-to-use methods with intuitive names, starDOM makes DOM traversal and manipulation easy. Event handling is a snap with starDOM's on and off methods. AJAX requests are simple to create and launch, and return a Promise for easy function chaining.

See a simple live demo--search Google Books for books and add them to your reading list using starDOM.

Core Functionality

$s is starDOM's flexible central function, allowing users to select DOM elements, wrap HTML elements in starDOM's DOMNodeCollection class, or queue functions for execution once the DOM has fully loaded.

const $s = argument => {
  if (argument instanceof Function) {
    DOMLoaded ? argument() : callbackQueue.push(argument);

  } else {
    let nodes;

    if (argument instanceof HTMLElement) {
      nodes = [argument];

    } else {
      const nodeList = document.querySelectorAll(argument);
      nodes = Array.from(nodeList);
    }

    return new DOMNodeCollection(nodes);
  }
};

Selected DOM elements and HTML elements wrapped by DOMNodeCollection have access to several handy methods:

DOM Manipulation

  • html() takes an optional string argument to set the innerHTML of selected elements, or returns the innerHTML of the first member of the selected collection if no argument is provided.

  • empty() clears the innerHTML of all selected elements.

  • append(element) flexibly appends an HTMLElement, DOMNodeCollection, or string to every selected element.

  • addClass(className) adds a class to all selected elements.

  • removeClass(className) removes the specified class from each selected element.

  • attr(name) takes an optional string argument to set the value of the specified attribute for each selected element, or returns the value of the attribute for the first member of the collection if no value is provided.

DOM Traversal

  • children() returns a DOMNodeCollection containing all children of every selected element.

  • parent() returns a DOMNodeCollection containing the parent nodes of every selected element.

  • find(selector) returns all descendants of selected elements matching the CSS selector argument.

  • remove() removes all selected elements from the DOM.

Event Handling

  • on(eventType, callback) sets an event listener for the specified event type on all selected elements.

  • off(eventType) removes all event listeners for the given event type from selected elements.

AJAX Requests

starDOM also provides a flexible and intuitive interface for asynchronous HTTP requests.

  • $s.ajax({options}) constructs and sends an XMLHttpRequest using the provided options object, returning a Promise that allows for infinitely chained dependent function calls.
$s.ajax({
  method: 'GET',
  url: 'https://www.googleapis.com/books/v1/volumes',
  data: { q: 'isbn:0312282990' }
})
You can’t perform that action at this time.