DOM Swap is a JavaScript library that can be used to transverse and manipulate the DOM. For a given argument, the library returns an instance of the DOMNodeCollection class. The DOMNodeCollection can contain a single element or multiple elements and methods are chainable.
Remembrall is a Harry Potter todo app built using the DOM Swap library. View Rememberall here.
To use DOM Swap, download the DOM Swap library, place it in your root directory, and include the following tag in the head of your html file:
<script type="text/javascript" src="./domswap/lib/domswap.js"></script>
- $l
- $l.ajax
- html
- val
- append
- empty
- attr
- hasClass
- addClass
- removeClass
- child
- parent
- find
- remove
$l is a wrapper for all methods in Domswap. It can take in an HTML element, a string, or a function. If the argument passed in is a function, $l will wait until the document is laoded and execute the function as a callback.
Ajax requests can be sent using the $l wrapper. The ajax method takes in a hash with the type of request and url. Success and error callbacks maybe given, however, if none are supplied, default callbacks will console the returned data.
$l.ajax = function(object) {
const defaults = {data: {}};
const xhr = new XMLHttpRequest();
defaults.success = function(returnData) {
console.log("Success");
console.log(returnData);
};
defaults.error = function(returnData) {
console.log("Error");
console.log(returnData);
};
const data = Object.assign({}, defaults, object);
xhr.open(data.type, data.url);
xhr.onload = function() {
const returnData = JSON.parse(xhr.response);
if(xhr.status === 200) {
data.success(returnData);
} else {
data.error(returnData);
}
};
xhr.send(data.data);
};
If a string is passed to the function, it sets the inner HTML of every element in the DOMNodeCollection. If no argument is passed, it returns the inner html of the first node in the array.
The val function takes in a string, number, array, or no argument. If no argument is supplied, it returns the value of the first element in the collection. If a string or number is given, it sets the value of each element in the collection to the specified argument. An array is provided for input types checkbox and radio. If an array is supplied, for each item in the array, it will check or select each item in the collection if its value is contained in the argument.
The append method excepts an wrapped collection, an HTML element, or a string. It the argument is an instance of the DOMNodeCollection or an HTML element, it adds the outer html to each element's inner html, otherwise, it adds the argument to each element's inner html.
Clears the inner html of each element in the DOMNodeCollection.
Takes in a class name and returns either true or false depending on if the first item in the collection contains the class.
These two methods both take in a class name as an argument and either adds a class or removes a class from each element in the DOMNodeCollection. If an element already has a class name, the new class name will be added onto the old class name, giving the element multiple class names.
Recursively transverses the tree and returns a DOMNodeCollection containing all children of every direct child of the elements in the original collection.
children() {
const allChildren = [];
this.elements.forEach((el) => {
let children = el.children;
let childrenArray = Array.from(children);
childrenArray.forEach((child) => {
allChildren.push(child);
});
});
return new DOMNodeCollection(allChildren);
}
Returns a new DOMNodeCollection containing the parents of every element in the original DOMNodeCollection. If two nodes have the same parent, the parent is only added once to the new collection.
Takes in a selector as an argument and returns a new collection of all nodes that are decedents of the elements in the original collection and that match the selector.