
UXR
A minimal in mind library for DOM related routines and element selections. UXR wraps some most used methods like CSS Classes, Event Management, Data Management, Attribute selections/updates. Supports chaining and plugins.
UXR has the philosophy of fewer code and low file size. Because of this, widely supported ES6 codes are not transpiled to ES5 versions and not trying to cover all JavaScript methods which are normally written without much effort. UXR provides easy to wrappers for normally complex once.
Browser Support
Browser | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Version | 49+ | 36+ | 37+ | 10+ | 12+ |
How To Use
You can install UXR via Node package managers
$ npm install uxr// or$ yarn add uxr
Or you can directly include you dist
files to your project after downloading the desired version.
After adding the dist/uxr.min.js
to your page, you can select an element set from DOM and start to manipulate/modify the selection.
Loading UXR methods
You can define UXR methods to run when page loads and content ready. Or run when needed.
uxr;uxr;
Element Selection
Every uxr
methods starts with element selections. Basically selection uses querySelectorAll
getting element from DOM or Arrays.
// selecting an element with querySelectorAll supported selector strings;// getting an array as selector
Chaining
uxr
methods supports chaining. So you can call uxr
methods one after another.
;
Attribute Manipulation
With uxr(selector).attr()
methods you can get an attribute's value or set a value in HTML tags
let el = ;// get the IDlet id = el;// getAttr method is an alias to attr(name)let id = el;// set the IDel;// setAttr method is an alias to attr(name, value);el;// get a data-attr value// the following both samples gets the same attributeel;el;// Remove an attribute from HTMLel;el;
There are some, easy to use - easy to remember attribute methods
uxr(selector).src(value)
: if you send thevalue
it sets thesrc
of the element. Otherwise returns thesrc
value.uxr(selector).href(value)
: if you send thevalue
it sets thehref
value of the anchor with the new one. Otherwise returns thehref
value.
Props
With uxr(selector).prop()
methods you can get an DOM node element's properties. This is different than attr methods where it get native elements properties rather than HTML attributes.
let el = ;// get a propertylet innerText = el;// set a propertyel;
There are some, easy to use - easy to remember property methods
uxr(selector).text(value)
: if you send thevalue
it sets theinnerText
value with the new one. Otherwise returns theinnerText
value.uxr(selector).html(value)
: if you send thevalue
it sets theinnerHTML
value with the new one. Otherwise returns theinnerHTML
value.uxr(selector).value(value)
: if you send thevalue
it sets the value of form elements with the new one. Otherwise returns the value of the form element.
Class Manipulation
With uxr
it is easier to add/remove or check classes. All for class manipulation methods supports multiple class names separated with space and setting class starting with dot (.
)
let el = ;// add a new css classel;el;// add multiple classes at onceel;el;// remove a css classel;el;// toggles a classel;el;// checks if has the class or notel;el;
Data Attributes
Data method gets or sets a data attribute. If dataset
supported, gets or sets values via dataset
otherwise, uses the getAttribute
method to get value. Both supports camelCase and dashed attribute names.
let el = ;// get data valueeldata'uxr-demo';eldata'uxrDemo';// set data valueeldata'uxr-demo' true;eldata'uxrDemo' true;
Events
DOM events can easily attached to elements. Named events and anonymous events supported while attaching the event. Also triggering an event is possible.
Add Events
let { console;}// attach an event;// attach an event to child;// attach multiple event
Remove Events
// remove all click events;// remove only click event attached with myFunc;// remove events attached with an anonymous function
Single Run Events
Single Run events are only run once then remove itself from the element.
// run once
Trigger Events
Native and custom events can be triggered by using trigger method. Similar to event bindings, event trigger can be triggered on children elements. Despite event binding, where you can bind multiple events at once, you can trigger one event at a time.
// trigger a click event;// trigger a custom event;// trigger a focus event in children;// trigger event with params;// trigger event with params in children;
Wrapper Methods
With wrapper methods, you can wrap element or elements to a new parent or unwrap them.
let single = ;let list = ;// wrap elementsingle;// wrap all elements in a single parentlist;// Unwrap the parentsingle;
Unwrap removes the immediate parent. If a selector also defined for the unwrap as el.unwrap(selector)
, it check if the immediate parent matches the selector.
For wrapper definitions, you can define wrapper string without brackets, with brackets, with attributes etc. All of the following strings are valid wrapper definitions
div
only name of the tag<div>
tag name with brackets<div />
<div></div>
<div class="wrapper" />
tag name with attributes<div class='wrapper' id="container"></div>
Element Insertions
By using before
, after
, prepend
and append
you can control where to insert newly created elements. Also with replaceWith
you can swap the element with a new one.
let el = ;// adds an element before selectionel;el;// adds an element after selectionel;el;// appends an element add the end of selection's contentel;el;// appends an element add the beginning of selection's contentel;el;// replaces the element with new oneel;
Filtering and Finding
Filtering methods help to find or filter elements in a UXR object.
// create a subset of elements in a UXR object;// create a subset of elements that a not matched the selector in a UXR object;// find / select children elements in a UXR object// has method is an alias to find;;
Traversing
With traversal methods, you can find adjacent or parent elements accordingly. Almost all traversal methods returns a uxr
object. You can return the previous uxr
by chaining end()
let el = ;// get the immediate parentel;// get the grandparentel;// filter the parents and get the first matchedel;// get the next siblingelnext;// get the next sibling if matchedelnextselector;// get the previous siblingel;// get the previous sibling if matchedel;// get the first element in uxr object - selectionel;// get the last element in uxr object - selectionel;// get the immediate parentelparent;// get the immediate parent if matched to selectorelparentselector;// get the all children elementel;// get the all matched childrenel;// get the all siblingsel;// get the all matched siblingsel;
CSS
css
method helps to set or get style attributes of the elements.
let el = ;// get a style propertyel; // returns the display property value// get a list of style properties// returns an object with listed values.// note that, you can ask for properties both kebap-case and camelCaseel;// returns {display: value, margin: value, paddingTop: value, borderLeft: value}// sets or updates a single propertyel;el;el;// sets or updates a list of properties// note that, you can send a object contains property:value pairsel;
Dimensions
Dimension related methods returns or sets content width or height according to dimension method. Except setting width
and height
methods, all other usages break the chaining.
let el = ;// returns the first elements content width// note that: this return only the content width, no-border, no-padding, no-marginelwidth;el; // alias method// sets the width of elements in the uxr object.// similar method to el.css('width', value);elwidth'100px';el;// returns the clientWidth of the first element// note that: this is only differs from width method with addition of paddingelinnerWidth;el; // alias method// returns the offsetWidth of the first element// note that: this calculates width with border, padding and content-width altogetherelouterWidth;el; // alias method// returns the offsetWidth of the first element including margins// note that: this calculates width with margin, border, padding and content-width altogetherelouterWidthtrue;el; // alias method// returns the first elements content height// note that: this return only the content height, no-border, no-padding, no-marginelheight;el; // alias method// sets the height of elements in the uxr object.// similar method to el.css('height', value);elheight'100px';el;// returns the clientHeight of the first element// note that: this is only differs from width method with addition of paddingelinnerHeight;el; // alias method// returns the offsetHeight of the first element// note that: this calculates height with border, padding and content-height altogetherelouterHeight;el; // alias method// returns the offsetHeight of the first element including margins// note that: this calculates height with margin, border, padding and content-height altogetherelouterHeighttrue;el; // alias method
Cloning
Clone methods, clones the nodes in a UXR object.
let el = ;// clones the all elements in uxr objectlet clone = el;// deep clones (child elements and inner contents) the all elements in uxr objectlet cloneDeep = el;