A lightweight DOM manipulation library that includes AJAX requests and event handling.
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!"));Get and Set innerHTML.
//get
$newElement.html()
//set
$newElement.html("To infinity... and beyond!")Add child elements.
$newElement.append(children)Add a CSS class.
$newElement.addClass(className)Remove CSS class.
$newElement.removeClass(className)Get and Set attributes.
//get
$newElement.attr(attrName)
//set
$newElement.attr(attrName, value)Get children.
$newElement.children()Get parent.
$newElement.parent()Find by selector.
$newElement.find(selector)Clear innerHTML.
$newElement.empty()Remove event listener.
$newElement.off("eventName", callback)Add event listener.
$newElement.on("eventName", callback)Remove from DOM.
$newElement.remove()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.");
}
});