Module sciter::dom [−] [src]

DOM access methods.

Introduction.

Let’s assume you already integrated Sciter in your application and so you have Sciter window with loaded content.

From Sciter point of view loaded document is a tree of DOM elements (elements of Document Object Model). Sciter builds this tree while loading/parsing of input HTML. As a rule each tag in source HTML gets matching DOM element (there are exceptions, see below).

You can change text, attributes, state flags of DOM elements; add new or remove existing DOM elements. You also can attach your own DOM event handlers to DOM elements to receive events and notifications.

Therefore your UI in Sciter is a collection of uniform DOM elements that can be styled by CSS and manipulated by native or script code.

Basic operations

To access the DOM tree we need to get reference of its root element (root element is an element representing <html> tag in HTML source).

let root = Element::from_window(hwnd);
assert_eq(root.get_tag(), "html");

By having root element reference we are able to access any other element in the tree using various access and search functions like SciterGetNthChild, SciterSelectElements, … All of them are wrapped into methods of dom::Element. Here is how you would get reference to first <div> element with class "sidebar" using CSS selectors:

let sidebar = root.find_first("div.sidebar").unwrap();

The same in script:

var sidebar = self.select("div.sidebar"); // or
var sidebar = self.$(div.sidebar); // using stringizer select variant

DOM element operations

You can change text or HTML of DOM element:

if let Some(el) = root.find_first("#cancel") {
    el.set_text("Abort!");
    el.set_html(br##"<img src="http://lorempixel.com/32/32/cats/" alt="some cat"/>"##, None);
}

The same but in script:

var el = ...;
el.text = "Hello world"; // text
el.html = "Hello <b>wrold</b>!"; // inner html

You can get or set DOM attributes of any DOM element:

let val = el.get_attribute("class").unwrap();
el.set_attribute("class", "new-class");

To remove existing DOM element (detach it from the DOM) you will do this:

el.detach();

and when code will live scope where the el variable is defined the DOM element will be destroyed.

Creation and population of DOM elements looks like this:

let p = Element::with_text("p", "Hello"); // create <p> element
el.append(p); // append it to existing element, or insert() ...

And in script:

var p = new Element("p", "Hello");
el.append(p);

To change runtime state flags of DOM element we do something like this:

el.set_state(STATE_VISITED);

And in script:

el.state.visited = true;

(after such call the element will match :visited CSS selector)

Getting and setting values of DOM elements.

By default value of DOM element is its text but some DOM elements may have so called behaviors attached to them (see below). <input>’s elements for example are plain DOM elements but each input type has its own behavior assigned to the element. The behavior, among other things, is responsible for providing and setting value of the element. For example value of input type=checkbox> is boolean – true or false, and value of <form> element is a collection (name/value map) of all inputs on the form.

In native code values are represented by sciter::Value objects. sciter::Value is a structure that can hold different types of values: numbers, strings, arrays, objects, etc (see documentation).

Here is how to set numeric value of DOM element in native code:

if let Some(num) = root.find_first("input[type=number]") {
    num.set_value( sciter::Value::from(12) );
}

In script the same will look like:

if (var num = self.select("input[type=number]")) {
    num.value = 12;
}

SCDOM_RESULT	Type of the result value for Sciter DOM functions.
SET_ELEMENT_HTML	`dom::Element.set_html()` options.

Type Definitions

HELEMENT
Result	A specialized `Result` type for DOM operations.

Module sciter::dom [−] [src]

Introduction.

Basic operations

DOM element operations

Getting and setting values of DOM elements.

Reexports

Modules

Structs

Enums

Type Definitions