JAVASCRIPT

Ink.Dom.Element_1

DOM Traversal and manipulation

All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.Dom.Element_1 class

Functions
Function name Description
.appendHTML(elm, html) Appends HTML to an element.
.childElementCount(elm) Counts the number of children of an element
.clonePosition(cloneTo, cloneFrom) Clones an element's position to another
.create(tag, properties) Creates a DOM element.
.data(selector) Gets data attributes from an element
.descendantOf(node, descendant) Checks if a node is descendant of another
.elementDimensions(element) Get an element's dimensions in pixels.
.elementHeight(element) Get an element's height in pixels.
.elementLeft(element) Deprecated. Alias for offsetLeft()
.elementTop(element) Deprecated. Alias for offsetTop()
.elementWidth(element) Get an element's width in pixels.
.ellipsizeText(element, [ellipsis]) Text-overflow: ellipsis emulation
.fillChecks(insertAfterEl, name, data, [defaultValue], [splitEl]) Creates set of checkbox buttons
.fillRadios(insertAfterEl, name, data, [skipEmpty], [defaultValue], [splitEl]) Creates a set of radio buttons from an array of data
.fillSelect(container, data, [skipEmpty], [defaultValue]) Fills a select element with options
.findUpwardsByClass(element, className) Finds the closest ancestor by class name
.findUpwardsById(element, id) Finds the closest ancestor by id
.findUpwardsBySelector(element, sel) Finds the closest ancestor by CSS selector
.findUpwardsByTag(element, tag) Finds the closest ancestor by tag name
.findUpwardsHaving(element, boolTest) Finds the closest ancestor element matching your test function
.firstElementChild(elm) Get first child element of another
.get(elm) Shortcut for document.getElementById
.getChildrenText(el, [removeIt]) Gets the trimmed text of an element
.getSelectValues(select) Gets value of a select element
.hasAttribute(elm, attr) Checks if an element has an attribute
.htmlToFragment(html) Creates a documentFragment from an HTML string.
.inViewport(element, [options]) Check if an element is inside the viewport
.insertAfter(newElm, targetElm) Inserts an element right after another
.insertBefore(newElm, targetElm) Inserts an element before another
.insertBottom(newElm, targetElm) Inserts an element as the last child of another
.insertTop(newElm, targetElm) Inserts an element as the first child of another
.isAncestorOf(ancestor, node) Checks if a node is an ancestor of another
.isDOMElement(o) Checks if something is a DOM Element.
.isHidden(element) Check if an element is hidden.
.isLink(element) Checks if an element is a link
.isVisible(element) Check if an element is visible
.lastElementChild(elm) Get the last child element of another
.moveCursorTo(el, t) Move the cursor on an input or textarea element.
.nextElementSibling(node) Get the first sibling element after the node
.nextSiblings(elm) Gets the next siblings of an element
.offset(elm)
.offset() Gets the cumulative offset for an element
.offset2(el) deprecated Alias for offset()
.offsetLeft(elm) Gets the left offset of an element
.offsetTop(elm) Gets the top offset of an element
.outerDimensions(element) Get the outer dimensions of an element in pixels.
.pageHeight() Get the page's height.
.pageWidth() Get the page's width.
.parentIndexOf([parentEl], childEl) Gets the index of an element relative to a parent
.positionedOffset(element) Gets the relative offset of an element
.prependHTML(elm, html) Prepends HTML to an element.
.previousElementSibling(node) Get the first sibling element before the node
.previousSiblings(elm) Gets the previous siblings of an element
.remove(elm) Removes a DOM Element
.removeTextNodeChildren(el) Removes direct text children.
.replace(element, replacement) Replaces an element with another.
.scroll([elm]) Gets the scroll of the element
.scrollHeight() Returns how much pixels the page was scrolled from the top of the document.
.scrollTo(elm) Scrolls the window to an element
.scrollWidth() Returns how much pixels the page was scrolled from the left side of the document.
.setHTML(elm, html) Sets the inner HTML of an element.
.setTextContent(node, text) Replaces text content of a DOM Node
.siblings(elm) Gets the all siblings of an element
.textContent(node) Retrieves textContent from node
.unwrap(elem, [wrapperSelector]) Places an element outside a wrapper.
.viewportHeight() Get the viewport's height.
.viewportWidth() Get the viewport's width.
.wrap(target, container) Wraps an element inside a container.

.appendHTML(elm, html) method

Appends HTML to an element.
This method parses the html string and doesn't modify its contents

Accepts

  • elm

    Element

  • html

    Markup string

Append a HTML string to an element

Code

<!-- Init markup -->
<div id="container">
    <p>First paragraph</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var container = Ink.i('container');
    InkElement.appendHTML(container, '<p>This is a paragraph with <span>markup</span> <a href="#">inside</a></p>');    
});
</script>

<!-- Result-->
<div id="container">
    <p>First paragraph</p>
    <p>This is a paragraph with <span>markup</span> <a href="#">inside</a></p>
</div>

.childElementCount(elm) method

Counts the number of children of an element

Accepts

  • elm

    element

Get number of child nodes of an element.

Code

<div id="container">
    Text node
    <h2>Child 1</h2>
    <div>Child 2</div>
    <p>Child 3</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');

    var numChilds = InkElement.childElementCount(container);

    Ink.log(numChilds); // 3 
    Ink.log(container.childNodes.length); // 7 
});
</script>

.clonePosition(cloneTo, cloneFrom) method

Clones an element's position to another

Accepts

  • cloneTo

    element to be position cloned

  • cloneFrom

    element to get the cloned position

Clone top, left position from an element to another one

Code

<style type="text/css">
#original {
    position:absolute;
    top: 10px;
    left: 10px;
}
#target {
    position:absolute;
    top: 50px;
    left: 50px;
}
</style>
<div id="original">
    Original
</div>
<div id="target">
    Target
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var original = Ink.i('original'); 
    var target = Ink.i('target'); 
  
    Ink.log(InkElement.offset(original)); // [10, 10]

    InkElement.clonePosition(original, target);

    Ink.log(InkElement.offset(original)); // [50, 50]
});
</script>

.create(tag, properties) method

Creates a DOM element.

Just a shortcut for document.createElement(tag), but with the second argument you can call additional functions present in Ink.Dom.Element.

Accepts

  • tag

    Tag name

  • properties

    Object with properties to be set on the element. You can also call other functions in Ink.Dom.Element like this

Create a new element div and append it to element with id elm_id

Code

<!-- Element to insert new element -->
<div id="elm_id"></div>
<!-- Create Element -->
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var parentElm = Ink.i('elm_id');
    var newElm = InkElement.create('div', { 
            className: 'elm_class',
            id: 'new_elm_id',
            setTextContent: 'This is a new div element',
            insertBottom: parentElm
        });
});
</script>
<!-- Output -->
<div id="elm_id">
    <div id="new_elm_id" class="elm_class">This is a new div element</div>
</div>

.data(selector) method

Gets data attributes from an element

Accepts

  • selector

    Element or CSS selector

Get all data- attributes into an object. All data attributes will be converted to camel case.

Code

<div id="container" data-option="option_value" data-foo="bar" data-new-attr="attr_value">
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var cont = Ink.i('container');
      
    var data = InkElement.data(cont);

    Ink.log(data);
    /*
     * Output: 
       {
            option: 'option_value',
            foo: 'bar',
            neAttr: 'attr_value'
       }
    */
});
</script>

.descendantOf(node, descendant) method

Checks if a node is descendant of another

Accepts

  • node

    The ancestor

  • descendant

    The descendant

Check if an element is descendant of a given node.

Code

<div id="container">
    <div id="level_1">
        <div id="level_2"></div>
    </div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');
    var levelElm1 = Ink.i('level_1');
    var levelElm2 = Ink.i('level_2');

    InkElement.descendantOf(container, levelElm1); // true 
    InkElement.descendantOf(container, levelElm2); // true 
    InkElement.descendantOf(levelElm2, levelElm1); // false 
});
</script>

.elementDimensions(element) method

Get an element's dimensions in pixels.

Accepts

  • element

    DOM element or target ID

Get element dimensions. An array with computed dimensions will be returned.

Code

<style type="text/css">
.sample {
    width: 100px;
    height: 50px;
}
</style>
<div id="elm_1" class="sample">
    A
</div>
<div id="elm_2">
    <p>B content</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm1 = Ink.i('elm_1');
    var elm2 = Ink.i('elm_2');

    InkElement.elementDimensions(elm1); // [100, 50]
    InkElement.elementDimensions(elm2); // [1280, 40]
});
</script>

.elementHeight(element) method

Get an element's height in pixels.

Accepts

  • element

    DOM element or target ID

Get element height. Computed height will be returned.

Code

<style type="text/css">
.sample {
    width: 100px;
    height: 50px;
}
</style>
<div id="elm_1" class="sample">
    A
</div>
<div id="elm_2">
    <p>B content</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm1 = Ink.i('elm_1');
    var elm2 = Ink.i('elm_2');

    InkElement.elementHeight(elm1); // 50
    InkElement.elementHeight(elm2); // 40  
});
</script>

.elementLeft(element) method

Deprecated. Alias for offsetLeft()

Accepts

  • element

    DOM element or target ID

.elementTop(element) method

Deprecated. Alias for offsetTop()

Accepts

  • element

    Target DOM element or target ID

.elementWidth(element) method

Get an element's width in pixels.

Accepts

  • element

    Target DOM element or target ID

Get element width. Computed width will be returned.

Code

<style type="text/css">
.sample {
    width: 100px;
    height: 50px;
}
</style>
<div id="elm_1" class="sample">
    A
</div>
<div id="elm_2">
    <p>B content</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm1 = Ink.i('elm_1');
    var elm2 = Ink.i('elm_2');

    InkElement.elementWidth(elm1); // 100 
    InkElement.elementWidth(elm2); // 1280 
});
</script>

.ellipsizeText(element, [ellipsis]) method

Text-overflow: ellipsis emulation
Slices off a piece of text at the end of the element and adds the ellipsis so all text fits inside.

Accepts

  • element

    Element to modify text content

  • ellipsis

    '\u2026'String to append to the chopped text

.fillChecks(insertAfterEl, name, data, [defaultValue], [splitEl]) method

Creates set of checkbox buttons

Accepts

  • insertAfterEl

    Element after which the input elements will be created

  • name

    Name for the form field ([] is added if not present as a suffix)

  • data

    Data to populate the component

  • defaultValue

    Initial selected value

  • splitEl

    Name of element to add after each input element (example: 'br')

.fillRadios(insertAfterEl, name, data, [skipEmpty], [defaultValue], [splitEl]) method

Creates a set of radio buttons from an array of data

Accepts

  • insertAfterEl

    Element after which the input elements will be created

  • name

    Name for the form field ([] is added if not present as a suffix)

  • data

    Data to populate the component

  • skipEmpty

    Flag to skip creation of empty options

  • defaultValue

    Initial selected value

  • splitEl

    Name of element to add after each input element (example: 'br')

.fillSelect(container, data, [skipEmpty], [defaultValue]) method

Fills a select element with options

Accepts

  • container

    Select element which will get filled

  • data

    Data to populate the component

  • skipEmpty

    Flag to skip empty option

  • defaultValue

    Initial selected value

Fill a select element with options data

Code

<!-- Original -->
<select id="select_1">
</select>
<select id="select_2">
</select>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var mySelect1 = Ink.i('select_1');
    var mySelect2 = Ink.i('select_2');
    var data = [
        ['1', 'option 1'],
        ['2', 'option 2'],
        ['3', 'option 3']
    ];
    InkElement.fillSelect(mySelect1, data); 
    InkElement.fillSelect(mySelect2, data, true, '2');
});
</script>
<!-- Result -->
<select id="select_1">
    <option></option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>
<select id="select_2">
    <option value="1">option 1</option>
    <option value="2" selected>option 2</option>
    <option value="3">option 3</option>
</select>

.findUpwardsByClass(element, className) method

Finds the closest ancestor by class name

Accepts

  • element

    Element to base the search from

  • className

    Class name to search

Find a parent element that matches with given class name.

Code

<div id="container" class="container_class">
    <div>
        <p id="target">Target content</p>
    </div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var target = Ink.i('target');
    var upElement = InkElement.findUpwardsByClass(target, 'container_class');

    Ink.log(upElement);
    // <div id="container" class="container_class"><div><p id="target">Target content</p></div></div>

});
</script>

.findUpwardsById(element, id) method

Finds the closest ancestor by id

Accepts

  • element

    Element to base the search from

  • id

    ID to search

Find a parent element that matches with given id.

Code

<div id="container" class="container_class">
    <div>
        <p id="target">Target content</p>
    </div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var target = Ink.i('target');
    var upElement = InkElement.findUpwardsById(target, 'container');

    Ink.log(upElement);
    // <div id="container" class="container_class"><div><p id="target">Target content</p></div></div>

});
</script>

.findUpwardsBySelector(element, sel) method

Finds the closest ancestor by CSS selector

Accepts

  • element

    Element to base the search from

  • sel

    CSS selector

Find a parent element that matches with given id.

Code

<div id="container" class="container_class">
    <div>
        <p id="target">Target content</p>
    </div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var target = Ink.i('target');
    var upElement = InkElement.findUpwardsBySelector(target, '#container > div');

    Ink.log(upElement);
    // <div><p id="target">Target content</p></div> 

});
</script>

.findUpwardsByTag(element, tag) method

Finds the closest ancestor by tag name

Accepts

  • element

    Element to base the search from

  • tag

    Tag to search

Find a parent element that matches with given tag name.

Code

<div id="container" class="container_class">
    <div>
        <p id="target">Target content</p>
    </div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var target = Ink.i('target');
    var upElement = InkElement.findUpwardsByTag(target, 'div');

    Ink.log(upElement);
    // <div><p id="target">Target content</p></div> 

});
</script>

.findUpwardsHaving(element, boolTest) method

Finds the closest ancestor element matching your test function

Accepts

  • element

    Element to base the search from

  • boolTest

    Testing function

Find a parent element that matches with the rule in test function

Code

<div id="container" data-attr="attr_val" class="container_class">
    <div>
        <p id="target">Target content</p>
    </div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var target = Ink.i('target');
    var matchFunction = function(elm) { // will receive parent element as argument 
        if(elm && elm.getAttribute('data-attr') === 'attr_val') {
            return true;
        }
        return false;
    };
    var upElement = InkElement.findUpwardsHaving(target, matchFunction);

    Ink.log(upElement);
    // <div id="container" data-attr="attr_val" class="container_class"><div><p id="target">Target content</p></div></div>

});
</script>

.firstElementChild(elm) method

Get first child element of another

Accepts

  • elm

    Parent node

Get first child of an element

Code

<div id="container">
    <h2>Child 1</h2>
    <div>Child 2</div>
    <p>Child 3</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');

    var firstChild = InkElement.lastElementChild(container);

    Ink.log(firstChild); // <h2>Child 1</h2> 
});
</script>

.get(elm) method

Shortcut for document.getElementById

Accepts

  • elm

    Either an ID of an element, or an element.

Code

<div id="elm_id"></div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
        // alias to document.getElementById(); 
        var elm = InkElement.get('elm_id');
        Ink.log(elm);
});
</script>

.getChildrenText(el, [removeIt]) method

Gets the trimmed text of an element

Accepts

  • el

    Element to base the search from

  • removeIt

    Flag to remove the text from the element

Get all text child nodes of an element.

Code

<div id="container">
    Text node, 
    <h2>Child 1</h2>
    <div>Child 2</div>
    <p>Child 3</p>
    Another text node
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');

    var textChild = InkElement.getChildrenText(container);

    Ink.log(textChild); // Text node,Another text node
});
</script>

.getSelectValues(select) method

Gets value of a select element

Accepts

  • select

    element

Get all option values from a select element

Code

<select id="select">
    <option>--select--</option>
    <option value="1">Mon</option>
    <option value="2">Tue</option>
    <option value="3">Wed</option>
    <option value="4">Thu</option>
    <option value="5">Fri</option>
    <option value="6">Sat</option>
    <option value="7">Sun</option>
</select>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var select = Ink.i('select'); 

    var aOptions = InkElement.getSelectValues(select); 

    Ink.log(aOptions); // ['--select--', '1', '2', '3', '4', '5', '6', '7']
});
</script>

.hasAttribute(elm, attr) method

Checks if an element has an attribute

Accepts

  • elm

    Target element

  • attr

    Attribute name

Check if an element has the given attribute

Code

<!-- Initial element -->
<div id="elm" data-attr="attr_value">
    Element with attributes
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var elm = Ink.i('elm');
    InkElement.hasAttribute(elm, 'id');  // true 
    InkElement.hasAttribute(elm, 'data-attr');  // true 
    InkElement.hasAttribute(elm, 'name');  // false

});
</script>

.htmlToFragment(html) method

Creates a documentFragment from an HTML string.

Accepts

  • html

    HTML string

Create a document fragment from a HTML string. Can be append to an element

Code

<div id="target">
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var str = [
        '<div id="container">',
        '<div>',
        '<p>',
        'Text content',
        '</p>',
        '</div>',
        '</div>'
    ].join('');

    var html = InkElement.htmlToFragment(str); 

    Ink.log(InkElement.firstElementChild(html));    
    // <div id="container"> ... </div>

    var target = Ink.i('target');
    target.appendChild(html);  // html fragment can be appended to an element 
});
</script>
<!-- Result -->
<div id="target">
    <div id="container">
        <div>
            <p>Text content</p>
        </div>
    </div>
</div>

.inViewport(element, [options]) method

Check if an element is inside the viewport

Accepts

  • element

    DOM Element

  • options

    Options object. If you pass a Boolean value here, it is interpreted as `options.partial`

  • options.partial

    falseReturn `true` even if it is only partially visible.

  • options.margin

    0Consider a margin all around the viewport with `opts.margin` width a dead zone.

Check if an element is total or partial visible in viewport.

Code

<div id="container">
    <p>Text content</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var container = Ink.i('container'); 
    
    InkElement.inViewport(container); // true / false 
    InkElement.inViewport(container, true); // 2nd argument true to partial visibility
    InkElement.inViewport(container, {partial:true, margin:10}); // 2nd argument true to partial visibility
});
</script>

.insertAfter(newElm, targetElm) method

Inserts an element right after another

Accepts

  • newElm

    Element to be inserted

  • targetElm

    Key element

Create a new li element and insert it after element with id li_b

Code

<ul>
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
    <li id="li_f">F</li>
</ul>
<!-- Create a new LI and insert it after LI li_b -->
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var refElm = Ink.i('li_b');
    var newElm = InkElement.create('li', { setTextContent: 'New LI C'});

    InkElement.insertAfter(newElm, refElm);

});
</script>
<!-- Result -->
<ul>
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li>New LI C</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
    <li id="li_f">F</li>
</ul>

.insertBefore(newElm, targetElm) method

Inserts an element before another

Accepts

  • newElm

    Element to be inserted

  • targetElm

    Key element

Create a new li element and insert it before element with id li_d

Code

<ul>
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
    <li id="li_f">F</li>
</ul>
<!-- Create a new LI and insert it before LI li_d -->
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var refElm = Ink.i('li_d');
    var newElm = InkElement.create('li', { setTextContent: 'New LI C'});

    InkElement.insertBefore(newElm, refElm);

});
</script>
<!-- Result -->
<ul>
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li>New LI C</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
    <li id="li_f">F</li>
</ul>

.insertBottom(newElm, targetElm) method

Inserts an element as the last child of another

Accepts

  • newElm

    Element to be inserted

  • targetElm

    Key element

Create a new li element and insert it on the bottom of ul

Code

<ul id="ul_elm">
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li id="li_c">C</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
</ul>
<!-- Create a new LI and insert it on the bottom of UL -->
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var refElm = Ink.i('ul_elm');
    var newElm = InkElement.create('li', { setTextContent: 'New LI on the BOTTOM'});

    InkElement.insertBottom(newElm, refElm);

});
</script>
<!-- Result -->
<ul id="ul_elm">
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li id="li_c">C</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
    <li>New LI on the BOTTOM</li>
</ul>

.insertTop(newElm, targetElm) method

Inserts an element as the first child of another

Accepts

  • newElm

    Element to be inserted

  • targetElm

    Key element

Create a new li element and insert it on the top of ul

Code

<ul id="ul_elm">
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li id="li_c">C</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
</ul>
<!-- Create a new LI and insert it on the top of UL -->
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var refElm = Ink.i('ul_elm');
    var newElm = InkElement.create('li', { setTextContent: 'New LI on the TOP'});

    InkElement.insertTop(newElm, refElm);

});
</script>
<!-- Result -->
<ul id="ul_elm">
    <li>New LI on the TOP</li>
    <li id="li_a">A</li>
    <li id="li_b">B</li>
    <li id="li_c">C</li>
    <li id="li_d">D</li>
    <li id="li_e">E</li>
</ul>

.isAncestorOf(ancestor, node) method

Checks if a node is an ancestor of another

Accepts

  • ancestor

    Ancestor node

  • node

    Descendant node

Check if an element is ancestor of a given node.

Code

<div id="container">
    <div id="level_1">
        <div id="level_2"></div>
    </div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');
    var levelElm1 = Ink.i('level_1');
    var levelElm2 = Ink.i('level_2');

    InkElement.isAncestorOf(container, levelElm1); // true 
    InkElement.isAncestorOf(container, levelElm2); // true 
    InkElement.isAncestorOf(levelElm2, levelElm1); // false 
});
</script>

.isDOMElement(o) method

Checks if something is a DOM Element.

Accepts

  • o

    The object to be checked.

Example

                var el = Ink.s('#element');
                if( InkElement.isDOMElement( el ) === true ){
                    // It is a DOM Element.
                } else {
                    // It is NOT a DOM Element.
                }

.isHidden(element) method

Check if an element is hidden.
Taken from Mootools Element extras ( https://gist.github.com/cheeaun/73342 )
Does not take into account visibility:hidden

Accepts

  • element

    Element to check

Check if an element is hidden

Code

<style type="text/css">
#elm_2{
display: none;
}
</style>
<div id="elm_1">
    <p>Text with an <a id="elm_2" href="#">hidden link</a></p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var elm1 = Ink.i('elm_1'); 
    var elm2 = Ink.i('elm_2'); 

    InkElement.isHidden(elm1); // false

    InkElement.isHidden(elm2); // true
});
</script>

.isVisible(element) method

Check if an element is visible

Accepts

  • element

    Element to check

Check if an element is visible

Code

<style type="text/css">
#elm_2{
display: none;
}
</style>
<div id="elm_1">
    <p>Text with an <a id="elm_2" href="#">hidden link</a></p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var elm1 = Ink.i('elm_1'); 
    var elm2 = Ink.i('elm_2'); 

    InkElement.isVisible(elm1); // true

    InkElement.isVisible(elm2); // false
});
</script>

.lastElementChild(elm) method

Get the last child element of another

Accepts

  • elm

    Parent node

Get last child of and element

Code

<div id="container">
    <h2>Child 1</h2>
    <div>Child 2</div>
    <p>Child 3</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');

    var lastChild = InkElement.lastElementChild(container);

    Ink.log(lastChild); // <p>Child 3</p> 
});
</script>

.moveCursorTo(el, t) method

Move the cursor on an input or textarea element.

Accepts

  • el

    Input or Textarea element

  • t

    Index of the character to move the cursor to

Move cursor in a textarea to given position.

Code

<textarea id="textarea">
This is a sample text in textarea
</textarea>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var textarea = Ink.i('textarea'); 

    textarea.focus(); 
  
    InkElement.moveCursorTo(textarea, 10); 
});
</script>

.nextElementSibling(node) method

Get the first sibling element after the node

Accepts

  • node

    The current node

Get next node of a given element

Code

<div id="container">
    Text node, 
    <h2 id="elm_1">Child 1</h2>
    <div id="elm_2">Child 2</div>
    Another Text node
    <p id="elm_3">Child 3</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm1 = Ink.i('elm_1');
    var elm2 = Ink.i('elm_2');
    var elm3 = Ink.i('elm_3');

    var nextSibling1 = InkElement.nextElementSibling(elm1);
    var nextSibling2 = InkElement.nextElementSibling(elm2);
    var nextSibling3 = InkElement.nextElementSibling(elm3);

    Ink.log(nextSibling1); // <div id="elm_2">Child 2</div>
    Ink.log(nextSibling2); // <p id="elm_3">Child 3</p> 
    Ink.log(nextSibling3); // null 
});
</script>

.nextSiblings(elm) method

Gets the next siblings of an element

Accepts

  • elm

    Element

Get next nodes of a given element

Code

<div id="container">
    Text node, 
    <h2 id="elm_1">Child 1</h2>
    <div>Child 2</div>
    Another Text node
    <p>Child 3</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm1 = Ink.i('elm_1');

    var nextSiblings = InkElement.nextSiblings(elm1);

    Ink.log(nextSiblings); // [<div>Child 2</div>, <p>Child 3</p>]
});
</script>

.offset(elm) method

Accepts

  • elm

    Target element

Get the offset (left and top) position of a given element

Code

<body>
    <div class="ink-grid">
        <div class="column-group">
            <div id="left_col" class="all-50"></div>
            <div id="right_col" class="all-50"></div>
        </div>
    </div>
</body>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var aOffset = InkElement.offset('right_col');

    Ink.log(aOffset); // [320, 30] 

});
</script>

.offset() method

Gets the cumulative offset for an element

Returns the top left position of the element on the page

.offset2(el) method

Alias for offset()

Accepts

  • el

    Element to be passed to `offset()`

.offsetLeft(elm) method

Gets the left offset of an element

Accepts

  • elm

    Target element

Get the left offset position of a given element

Code

<body>
    <div class="ink-grid">
        <div class="column-group">
            <div id="left_col" class="all-50"></div>
            <div id="right_col" class="all-50"></div>
        </div>
    </div>
</body>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var offsetLeft = InkElement.offsetLeft('right_col');

    Ink.log(offsetLeft); // 320

});
</script>

.offsetTop(elm) method

Gets the top offset of an element

Accepts

  • elm

    Target element

Get the top offset position of a given element

Code

<body>
    <div class="ink-grid">
        <div class="column-group">
            <div id="left_col" class="all-50"></div>
            <div id="right_col" class="all-50"></div>
        </div>
    </div>
</body>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var offsetTop = InkElement.offsetTop('right_col');

    Ink.log(offsetTop); // 30

});
</script>

.outerDimensions(element) method

Get the outer dimensions of an element in pixels.

Accepts

  • element

    Target element

Get element outer dimensions. An array with computed dimensions will be returned.

Code

<style type="text/css">
.sample {
    width: 100px;
    height: 50px;
}
div, p{
    padding: 2px;
    margin: 2px;
}
</style>
<div id="elm_1" class="sample">
    A
</div>
<div id="elm_2">
    <p>B content</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm1 = Ink.i('elm_1');
    var elm2 = Ink.i('elm_2');

    InkElement.elementDimensions(elm1); // [104, 54] - instead of [100, 50]
    InkElement.elementDimensions(elm2); // [1284, 44] - instead of [1280, 40]
});
</script>

.pageHeight() method

Get the page's height.

Get page height

Code

Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var pageHeight = InkElement.pageHeight();

    Ink.log(pageHeight); // 1567
});

.pageWidth() method

Get the page's width.

Get page width

Code

Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var pageWidth = InkElement.pageWidth();

    Ink.log(pageWidth); // 1280 
});

.parentIndexOf([parentEl], childEl) method

Gets the index of an element relative to a parent

Accepts

  • parentEl

    childEl's parent. Deprecated.

  • childEl

    Child Element to look for

Gets the index of an element relative to a parent

Code

<div id="container">
    <p id="elm_1">Text element 1</p>
    <p id="elm_2">Text element 2</p>
    <p id="elm_3">Text element 3</div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');
    var elm1 = Ink.i('elm_1');
    var elm2 = Ink.i('elm_2');
    var elm3 = Ink.i('elm_3');

    InkElement.parentIndexOf(container, elm1); // 0 
    InkElement.parentIndexOf(container, elm2); // 1 
    InkElement.parentIndexOf(container, elm3); // 2 
});
</script>

.positionedOffset(element) method

Gets the relative offset of an element

Accepts

  • element

    Target element

Get the offset (left and top) position of a given element relative to the closest positioned parent element

Code

<body>
<div id="container_a" style="padding:30px;">
    <div id="container_b" style="padding: 30px; position: relative;">
        <div id="container_c" style="position: absolute; top: 0px; left: 0px;">
        </div>
    </div>
</div>

</body>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var aPositionedOffset = InkElement.positionedOffset('container_c');

    Ink.log(aPositionedOffset); // [0, 0]  

});
</script>

.prependHTML(elm, html) method

Prepends HTML to an element.
This method parses the html string and doesn't modify its contents

Accepts

  • elm

    Element

  • html

    Markup string to prepend

Insert a HTML string in the begining of an element.

Code

<!-- Original markup -->
<div id="container">
    <p id="elm">Original paragraph</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var container = Ink.i('container');
    InkElement.prependHTML(container, '<p>First paragraph with <span>markup</span></p><p>Second paragraph</p>'); 
});
</script>

<!-- Result -->
<div id="container">
   <p>First paragraph with <span>markup</span></p>
   <p>Second paragraph</p>
   <p id="elm">Original paragraph</p>
</div>

.previousElementSibling(node) method

Get the first sibling element before the node

Accepts

  • node

    The current node

Get de previous node of a given element

Code

<div id="container">
    Text node, 
    <h2 id="elm_1">Child 1</h2>
    <div id="elm_2">Child 2</div>
    Another Text node
    <p id="elm_3">Child 3</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm1 = Ink.i('elm_1');
    var elm2 = Ink.i('elm_2');
    var elm3 = Ink.i('elm_3');

    var previousSibling1 = InkElement.previousElementSibling(elm1);
    var previousSibling2 = InkElement.previousElementSibling(elm2);
    var previousSibling3 = InkElement.previousElementSibling(elm3);

    Ink.log(previousSibling1); // null 
    Ink.log(previousSibling2); // <h2>Child 1</h2> 
    Ink.log(previousSibling3); // <div id="elm_2">Child 2</div> 
});
</script>

.previousSiblings(elm) method

Gets the previous siblings of an element

Accepts

  • elm

    Element

Get previous nodes of a given element

Code

<div id="container">
    Text node, 
    <h2>Child 1</h2>
    <div>Child 2</div>
    Another Text node
    <p id="elm_3">Child 3</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm3 = Ink.i('elm_3');

    var previousSiblings = InkElement.previousSiblings(elm3);

    Ink.log(previousSibling); // [<h2>Child 1</h2>, <div>Child 2</div>]
});
</script>

.remove(elm) method

Removes a DOM Element

Accepts

  • elm

    The element to remove

Remove an element

Code

<!-- Initial element -->
<div id="parent_elm">
    <div id="elm_to_remove">This element will be removed</div>
</div>
<!-- Remove Element -->
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var elmToRemove = Ink.i('elm_to_remove');
    InkElement.remove(elmToRemove); 

    // or just 
    
    InkElement.remove('elm_to_remove'); 
});
</script>
<!-- Result -->
<div id="parent_elm">
</div>

.removeTextNodeChildren(el) method

Removes direct text children.
Useful to remove nasty layout gaps generated by whitespace on the markup.

Accepts

  • el

    Element to remove text from

Remove text node childs of an element

Code

<!-- Original markup -->
<div id="container">
    Text node, 
    <h2>Child 1</h2>
    <div>Child 2</div>
    <p>Child 3</p>
    Another text node
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var container = Ink.i('container');

    InkElement.removeTextNodeChildren(container);
});
</script>
<!-- Result -->
<div id="container">
    <h2>Child 1</h2>
    <div>Child 2</div>
    <p>Child 3</p>
</div>

.replace(element, replacement) method

Replaces an element with another.

Accepts

  • element

    The element to be replaced.

  • replacement

    The new element.

Example

                  var newelement1 = InkElement.create('div');
                  // ...
                  replace(Ink.i('element1'), newelement1);

Replace an element by another one

Code

<!-- Original markup -->
<div id="container">
    <p id="elm">Element to be replaced</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var oldElm = Ink.i('elm');
    var newElm = InkElement.create('div', {setTextContent: 'New element'});

    InkElement.replace(oldElm, newElm);
});
</script>
<!-- Result -->
<div id="container">
    <div>New element</div>
</div>

.scroll([elm]) method

Gets the scroll of the element

Accepts

  • elm

    Target element or document.body

How to get the scroll position in a page or in an element.

Code

<div id="container" style="height:100px;overflow:scroll;">
    <p>line 1</p>
    <p>line 2</p>
    <p>line 3</p>
    <p>line 4</p>
    <p>line 5</p>
    <p>line 7</p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var pageScrollPosition = InkElement.scroll();
    Ink.log(pageScrollPosition); // [0, 0]  

    var container = Ink.i('container');
    var elementScrollPosition = InkElement.scroll(container);
    Ink.log(elementScrollPosition); // [0, 42]  - after scoll element container  
});
</script>

.scrollHeight() method

Returns how much pixels the page was scrolled from the top of the document.

.scrollTo(elm) method

Scrolls the window to an element

Accepts

  • elm

    Element where to scroll

How to scroll to an element position

Code

<body>
    <!-- ,,,, -->
    <div id="scroll_to_this">Scroll to this element</div>
    <!-- ,,, -->
</body>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    InkElement.scrollTo('scroll_to_this');

});
</script>

.scrollWidth() method

Returns how much pixels the page was scrolled from the left side of the document.

.setHTML(elm, html) method

Sets the inner HTML of an element.

Accepts

  • elm

    Element

  • html

    Markup string

Insert a HTML string to an element. Original content will be replaced.

Code

<!-- Init markup -->
<div id="container">
    <p>First paragraph</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    var container = Ink.i('container');
    InkElement.setHTML(container, '<p>This is a paragraph with <span>markup</span> <a href="#">inside</a></p>');    
});
</script>

<!-- Result -->
<div id="container">
    <p>This is a paragraph with <span>markup</span> <a href="#">inside</a></p>
</div>

.setTextContent(node, text) method

Replaces text content of a DOM Node
This method removes any child node previously present

Accepts

  • node

    Target node where the text will be added.

  • text

    Text to be added on the node.

Code

<div id="elm_id_a"></div>
<div id="elm_id_b">...</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

        var elmA = Ink.i('elm_id_a');
        InkElement.setTextContent(elmA, 'This is some text to element A');

        InkElement.setTextContent('elm_id_b', 'This is <a href="#">some text with <span>markup</span></a> to replace element B content');
});
</script>
<!-- Result -->
<div id="elm_id_a">This is some text to element A</div>
<div id="elm_id_b">This is &lt;a href="#"&gt;some text with &lt;span&gt;markup&lt;/span&gt;&lt;/a&gt; to replace element B content</div>

.siblings(elm) method

Gets the all siblings of an element

Accepts

  • elm

    Element

Get sibling nodes of a given element

Code

<div id="container">
    Text node, 
    <h2>Child 1</h2>
    <div id="elm_2">Child 2</div>
    Another Text node
    <p>Child 3</p>
</div>

<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var elm2 = Ink.i('elm_2');

    var siblings = InkElement.siblings(elm2);

    Ink.log(siblings); // [<h2>Child 1</h2>, <p>Child 3</p>] 
});
</script>

.textContent(node) method

Retrieves textContent from node

Accepts

  • node

    Where to retreive text from. Can be any node type.

Code

<div id="elm_id_a">This is the div content</div>
<div id="elm_id_b">This div has a <span>sub element</span></div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
        var contentA = InkElement.textContent(Ink.i('elm_id_a'));

        var contentB = InkElement.textContent('elm_id_b');

        Ink.log(contentA); // This is the div content

        Ink.log(contentB); // This div has a sub element
});
</script>

.unwrap(elem, [wrapperSelector]) method

Places an element outside a wrapper.

Accepts

  • elem

    The element you're trying to unwrap. This should be an ancestor of the wrapper.

  • wrapperSelector

    CSS Selector for the ancestor. Use this if your wrapper is not the direct parent of elem.

Example

            
            When you have this:
            
                 <div id="wrapper">
                     <div id="unwrapMe"></div>
                 </div>
            
            If you do this:
            
                 InkElement.unwrap('unwrapMe');
            
            You get this:
            
                 <div id="unwrapMe"></div>
                 <div id="wrapper"></div>

Create a wrapper around element with id target.

Code

<!-- Original -->
<div id="wrapper">
    <p id="target">
        Target content
    </p>
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var target = Ink.i('target');
    InkElement.unwrap(target);    
    // or unsing a selector 
    InkElement.unwrap(target, '#wrapper');
});
</script>
<!-- Result -->
<p id="target">
    Target content
</p>
<div id="wrapper">
    Wrapper content
</div>

.viewportHeight() method

Get the viewport's height.

Get viewport height

Code

Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var viewPortHeight = InkElement.viewportHeight();

    Ink.log(viewPortHeight); // 768
});

.viewportWidth() method

Get the viewport's width.

Get viewport width

Code

Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {
    
    var viewPortWidth = InkElement.viewportWidth();

    Ink.log(viewPortWidth); // 1280 
});

.wrap(target, container) method

Wraps an element inside a container.

The container may or may not be in the document yet.

Accepts

  • target

    Element to be wrapped

  • container

    Element to wrap the target

Example

            before:
            
                <div id="target"></div>
            
            call this function to wrap #target with a wrapper div.
            
                InkElement.wrap('target', InkElement.create('div', {id: 'container'});
            
            after: 
            
                <div id="container"><div id="target"></div></div>

Create a wrapper around element with id target.

Code

<!-- Original -->
<div id="target">
    Target content
</div>
<script>
Ink.requireModules(['Ink.Dom.Element_1'], function(InkElement) {

    var target = Ink.i('target');
    var newElm = InkElement.create('div', {setTextContent:'Wrapper content', id:'wrapper'});

    InkElement.wrap(target, newElm);    
});
</script>
<!-- Result -->
<div id="wrapper">
    Wrapper content
    <div id="target">
        Target content
    </div>
</div>