Skip to content
This repository has been archived by the owner on Aug 22, 2023. It is now read-only.

dom

Jump to bottom
larukedi edited this page Dec 15, 2014 · 15 revisions

Getting an element by its id

Usage: $l.id(elementId[, parent])

var myDiv = $l.id('my-div');
console.log(myDiv);

prints: <div id=​"my-div"></div>

Getting an element by its id (cached)

Usage: $l.idc(elementId)

var myDiv = $l.idc('my-div');
console.log(myDiv);

prints: <div id=​"my-div"></div>

Getting an element

Usage: $l(selector[, parent])

var textUsername = $l('#username');
console.log(textUsername);

prints: <input id=​"username" class="inp" type="text" name="username" />

Getting array of elements

Usage: $l(selector[, parent])

Note: selector argument must be an array

var textboxes = $l(['.inp']);
console.log(textboxes);

prints: [ <input id=​"username" class="inp" type="text" name="username" />, <input id=​"password" class="inp" type="password" name="password" /> ]

Getting array of elements by their class

Usage: $l.dom.selectByClass(selector[, parent])

var textboxes = $l.dom.selectByClass('inp');
console.log(textboxes);

prints: [ <input id=​"username" class="inp" type="text" name="username" />, <input id=​"password" class="inp" type="password" name="password" /> ]

Checks classes of document element

Usage: $l.dom.docprop(classname)

// if document's root element is <html class="js no-touch localstorage">
if ($l.dom.docprop('localstorage')) {
   localStorage.setItem('test', 'testvalue');
}

Setting/getting element attributes

Usage: $l.dom.attr(element, attribute[, value])

var target = $l.id('element');

// setting attribute
$l.dom.attr(target, 'id', 'new-id');

// getting attribute
console.log($l.dom.attr(target, 'id')); // prints new-id

Setting/getting element data

Usage: $l.dom.data(element, key[, value])

var target = $l.id('element');

// setting data (data-tag attribute on the element)
$l.dom.data(target, 'tag', 'improvement');

// getting data
console.log($l.dom.data(target, 'tag')); // prints improvement

Setting DOM events

Usage: $l.dom.setEvent(element, eventname, fnc)

$l.dom.setEvent(
    $l('#btn-submit'), // single element
    'click',
    function(event, element) {
        console.log(event);
        return false; // override event
    }
);

$l.dom.setEvent(
    $l(['.confirm-action']), // array of elements
    'click',
    function(event, element) {
        if (!confirm('Are you sure to do it?')) {
            return false; // cancel event
        }
    }
);

Creating new elements with HTML

Usage: $l.dom.create(html)

var fragment = $l.dom.create(
    '<div class="test"><strong>bold</strong> content</div>'
);
document.body.insertBefore(fragment, document.body.firstChild);

or

Usage: $l.dom.insert(element, position, content)

$l.dom.insert(
    document.body.firstChild,
    'beforeBegin', // beforeEnd, afterBegin, afterEnd
    '<div class="test"><strong>bold</strong> content</div>'
);

Creating new elements with parameters

Usage: $l.dom.createElement(element, attributes, children)

var element = $l.dom.createElement(
    'DIV',
    { 'class': 'pull-right' },
    'test'
);
$l('body').appendChild(element);

Various Methods

var target = $l('#content');

// clear all children and content inside the target
$l.dom.clear(target);

// insert new content
$l.dom.append(target, '<em>second</em>');
$l.dom.prepend(target, 'first');

// replace created content
$l.dom.replace(target, '<div>fresh start</div>');

// clone first child
$l.dom.clone(target.firstChild, $l.dom.cloneAppend);

Please don't hesitate to submit issues and pull requests.

Clone this wiki locally