#DOMahawk DOMahawk is a lightweight, flexible and feature-rich JavaScript library inspired by the industry standard library jQuery. You can check out a demo here: Live Demo
##Setup
DOMahawk does not currently have an npm module- to use, simply clone the /lib directory and either add the premade bundle.js to your project directory or run webpack lib/main.js <OUTPUT_FILE_NAME>.js to generate your own webpacked bundle. The latter option will allow you to customize DOMahawk to better suit your projects specific needs. In either case, the output file will need to be require()'d in your projects code.
##API
Currently, DOMahawk serves three main purposes, all of which are expressed as functions namespaced as $hawk:
- To convert an item into a
DomNodeCollectionwhich can be manipulated
$hawk("#element") // returns a DomNodeCollection objectCurrently, the following are valid inputs to the $hawk function: string, array, object
- Serve as a document-ready callback wrapper
$hawk(() => {
// Your code here...
});Additionally, $hawk will take in function inputs to be called when the document has loaded
- Make AJAX requests
$hawk.ajax({
url: `http://www.example.com`,
method: GET,
success: exampleCallback,
error: exampleErrorCallback,
data: {}
});$hawk.ajax() will return a JavaScript Promise
##Event Handlers
####on(type, callback)
Takes in a DOM Event type and a callback and adds an event listener to each HTMLElement in the DOMNodeCollection.
####off(type)
Takes in a DOM Event type and removes the specified event listener from each HTMLElement in the DOMNodeCollection. Passing no argument removes all event listeners instead.
##DOMNodeCollection
#each#html#empty#append#remove#attr#addClass#removeClass#toggleClass#children#parent#find
####each(callback)
Traverses each HTMLElement in the DomNodeCollection and executes the given callback on each.
####html(string)
Getter/setter method for the innerHTML of each HTMLElement in the DomNodeCollection, sets innerHTML to the string argument, if no argument is given will act as a getter.
####empty()
Clears the innerHTML for each HTMLElement in the DomNodeCollection.
####append(children)
Adds each element of children to the direct children for each HTMLElement in the DomNodeCollection. children can be an object, string or DomNodeCollection.
####remove()
Removes all children for each HTMLElement in the DomNodeCollection. To remove a specific child see HTMLElement#removeChild().
####attr(string, setTo)
Getter/setter method for the attributes of each HTMLElement in the DomNodeCollection. Will set the attribute specified by string to setTo- or if setTo is not given will return the value for the specified attribute.
####addClass(string)
Appends the given string CSS class to the attribute class. Duplicate entries will be ignored.
####removeClass(string)
Removes the given string CSS class from the attribute class.
####toggleClass(string)
If the CSS class specified by string is not present, will add it- otherwise will remove it.
####children()
Returns a new DomNodeCollection containing all of the direct descendants of the DomNodeCollection that it was called on.
####parent()
Returns a new DomNodeCollection containing all of the direct parents of the DomNodeCollection that it was called on.
####find(string)
Returns a new DomNodeCollection for any HTMLElement in the DomNodeCollection that matches the given query selector specified by string.