DOM Navigation And Manipulations

RightJS inherits its dom-navigation principles mostly from the Prototype and MooTools projects. As for the dom-manipulations it is a mix of ideas from Prototype, MooTools and jQuery.

top ↑Basic Elements Search

RightJS provides two pretty much standard methods to find elements on the page, $('element-id') and $$('css rule'). The first one finds an element by its ID and the second one selects all the elements on the page that fit the given css-rule.

var element = $('element-id');
var elements = $$('div > +');

RightJS supports majority of the CSS selectors up to the Level 3 and it will use a browser native css-selectors functionality if available.

top ↑Node Relative Navigation

RightJS provides a number of methods to navigate around an element’s neighborhood

parentthe parent element
parentsall the parent elements from bottom to top
childrenfirst level descendants
siblingsall the siblings
nextSiblingsnext siblings
prevSiblingsprevious siblings
nextnext sibling
prevprevious sibling
firstfirst matching descendant at any level
findall the matching descendants at any levels

All the methods can receive a css-rule as an argument. If a css-rule was specified then the result will be altered according to the rule, collections will be filtered out keeping only matching elements and methods that supposed to find a single element will skip elements until find the first one that matches the rule.

<div id="top">
<div id="second-1">
<div id="third-1"></div>
<div id="second-2"></div>
<div id="second-3"></div>

$('third-1').parent(); // -> div#second-1
$('third-1').parent('#top'); // -> div#top

$('top').find('div'); // -> all the subdivs

$('top').first('div'); // -> div#second-1

top ↑Basic Manipulations

There’s just one generic method that depending on a type of data provided, handles all the possible element manipulations.

insert(mixed content[, String position])

The content might be one of the following

  • A string html content
  • An element instance
  • An iterable object of any kind, Array, NodeList, arguments, etc.

And the position argument might be one of the following

  • top
  • bottom
  • before
  • after
  • instead

bottom is the default value

$('element').insert('<div>some html code</div>');

$('element').insert(another_element, 'top');

$('element').insert([element1, element2], 'after');

$('element').insert(anther_element.childNodes, 'before');

top ↑DOM Manipulation Shortcuts And Additional Methods

There are a few nice shortcuts and additional methods for the most common dom-manipulation operations that will make your application code more compact and readable

insertToinserts current element into given given one
replacereplaces current element with the given content
updateupdates current element content with the given one
wrapwraps current element with another element
cleanremoves all the child nodes out of the element
emptychecks if the element has no internal text or sub-elements

Some examples

var element = $E('div').insertTo(document.body).update('some html');

element.empty(); // -> false
element.clean().empty(); // -> true

element.replace('here was that element');