Element Selection

How to use Selector in Delven

Selectors tell Delven which DOMElements we will be operating on. Selectors used for for DOM manipulation are similar to selectors used for data selector in SELECT clause.

Selector types

Name Spec Data Types Description
by-css required [String] Select using CSS
by-name required [String] Select using element name
by-xpath required [String] Select using XPath
by-regex required [String] Select using regular expressions

Requirement

[
  {
    "by-XXXXX"  : "SELECTOR",    
    "filter" : ""
  }
]

Examples

For concreate example for specific types visit.

CSS Selector

In Delven, css selectors are patterns used to select the element(s) you want to interact with.

Selector Example Description Reference
.class .intro Selects all elements with class=“intro”
#id #firstname Selects the element with id=“firstname” ID selectors
[attribute=value] [redonly=true] Selects all elements with redonly=“true” 
  <span id="id1" class="class-one intro" redonly="true">Here's a span with some text.</span>
  <span id="id2" class="class-two intro">Here's a span with some text.</span>

Selector by CSS classname

SELECT * FROM http://www.delven.io/test/execute.html EVENTFLOW
[
  {
    "by-css" : ".class-one"   
  }
]

Selector by CSS id

SELECT * FROM http://www.delven.io/test/execute.html EVENTFLOW
[
  {
    "by-css" : "#id1"   
  }
]

Selector by CSS attribute

SELECT * FROM http://www.delven.io/test/execute.html EVENTFLOW
[
  {
    "by-css" : "[redonly=true]"   
  }
]

CSS Selector Reference