top

How To Use DOM Selector on Caph

Published 2014-10-28 | (Compatible with SDK 5.1 and 2014 models)

Tutorial on How to use caph DOM selector.

Prerequisites

To use caph DOM selector, you should include caph core dependent files in your application by putting the following code in your index.html file.

1
2
3
4
5
6
7
8
<html>
    <head>
        <script src="$CAPH/1.0.0/caph-level1-unified.min.js"></script>
    </head>
    <body>
       <!-- your code here. -->
    </body>
</html>

Source Files

Note

To download this source code, click here.

Creating your own application

Making DOM nodes

Create DOM nodes which you want. Following code is an example of How to include DOM nodes in file used in this tutorial.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div id='test'>
        <div>DIV</div>
        <div>DIV</div>
        <span>SPAN</span>
        <div class='yourClass'>div class="yourClass"</div>
        <div class='myClass'>div class="myClass"</div>
        <span class='myClass'>span class="myClass"</span>
        <div>DIV</div>
        <span>SPAN</span>
        <p>P<button>BUTTON</button></p>
        <div class='yourDiv'><p>id="yourDiv"</p></div>
        <div class='myDiv'>id="myDiv"</div>
    </div>
</body>

Using DOM nodes

Caph DOM selector provides three distinct options of identifying the DOM element using string prefix passed as parameter . If there is “#” prefix, selector finds an element by id attribute value. If prefix is “.“, selector finds elements by class attribute value. If there is no prefix, selector finds elements by name. Caph DOM selector can also have an additional parameter as element. Which if passed, selector finds element from passed parameter.

1
2
3
4
5
6
7
8
<body>
    <script>
        var testElement = caph.core.getElement('#test');
        var myClassElements = caph.core.getElement('.myClass');
        var pElement = caph.core.getElement('p');
        var pElementInYourDiv = caph.core.getElement('p', caph.core.getElement('#yourDiv'));
    </script>
</body>

Code is described below:

Line 3 Return <div id="test">
Line 4 Return <div class="myClass"> and <span class="myClass">
Line 5 Return <p>P<button>Button</button></p> and <p>id="yourDiv"</p>
Line 6 Return <p>id="yourDiv"</p>