DOMination is a JavaScript DOM interaction library, inspired by jQuery. Using DOMination, users can:
- Select single or multiple DOM elements
- Traverse and manipulate DOM elements
- Build DOM elements
- Create
DOMNodeCollectionobjects fromHTMLElements - Queue functions until DOM is fully loaded
- Simplify HTTP requests
To get started with DOMination, download the DOMination.js located in the lib folder, and include it in your source code.
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/reset.css">
<script src="./lib/DOMination.js" type="text/javascript"></script>
...
</head>DOMNodeCollection methods to navigate DOM elements
Returns a DOMNodeCollection object containing all of the direct children elements of every HTMLElement in the original DOMNodeCollection.
Returns a DOMNodeCollection object containing the unique parent elements of every HTMLElement in the original DOMNodeCollection.
DOMNodeCollection methods to view and/or change DOM elements
Returns the innerHTML for the first element in the DOMNodeCollection if no argument is given. If a string argument is given, it changes the innerHTML of each DOMNodeCollection element to the string argument originally passed in.
Empties the innerHTML of each DOMNodeCollection element
Takes a single HTMLElement, DOMNodeCollection, or string argument and appends it to each DOMNodeCollection element.
Remove each DOMNodeCollection element from the DOM.
Takes either one (attr(attribute)) or two (attr(attribute, value)) arguments. If given one argument, the method gets the value of the attribute given for the first element in the DOMNodeCollection. If given two arguments the method sets the attribute given, to the value given, for each DOMNodeCollection element.
Adds a unique class, given as an argument, to each DOMNodeCollection element.
Removes a class, given as an argument, from each DOMNodeCollection element.
Toggles a class, given as an argument, for each DOMNodeCollection element.
Adds event listener to each DOMNodeCollection element.
Removes event listener from each DOMNodeCollection element.
function handler () {
console.log("Someone clicked me! HALP!")
}
$l('.addItemButton').on('click', handler);
$l('.addItemButton').off("click");Sends HTTP Request and returns a Promise object. Accepts a Hash object as an argument with any of the following attributes:
- method (default: "GET"): HTTP Request method or type
- url (default: window.location.href): URL for HTTP Request
- success: success callback
- error: error callback
- contentType (default: 'text/plain'): content type of HTTP Request
$l.$ajax = function (options){
let defaults = {
method: 'GET',
url: window.location.href,
data: {},
contentType: 'text/plain',
success(data) {
JSON.parse(data);
},
error() { }
};
let requestOptions = $l.extend(defaults, options);
return new Promise(function (successCallback, failureCallback) {
const xhr = new XMLHttpRequest();
xhr.open(requestOptions['method'], requestOptions['url']);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.state < 300) {
successCallback(xhr.response);
} else {
failureCallback({
status: xhr.status,
statusText: xhr.statusText
});
}
};
xhr.error = function() {
failureCallback({
status: xhr.status,
statusText: xhr.statusText
});
};
xhr.send(requestOptions['data']);
});
};For an example of a project using the DOMination library, view the ToDo List Demo. To run the demo, clone the DOMination library and view the html file locally.