You are here: Designer > API > Designer API > query()
 

query()

Creates a new result set containing the HTML elements that match the supplied CSS selector. The context (optional) allows you to restrict the search to descendants of one or more context elements.

  • query(selector)
  • query(selector, context)


query(selector)

Creates a new result set containing the HTML elements in the template that match the supplied CSS selector.

selector

A String containing a CSS selector. See http://www.w3schools.com/cssref/css_selectors.asp for CSS selectors and combinations of CSS selectors.

query(selector, context)

Creates a new result set containing the HTML elements that match the supplied CSS selector. The context (optional) allows you to restrict the search to descendants of one or more context elements.

selector

A String containing a CSS selector. See http://www.w3schools.com/cssref/css_selectors.asp for CSS selectors and combinations of CSS selectors.

context

A result set or an HTML string. If the passed context is not a result set of HTML string it will be coerced to a String and interpreted as HTML.

Examples

Look for an element with a certain ID

This scripts applies a style rule to the queried elements.

query("#test1").css("color", "yellow");​
Matched element Matched element after script execution
​<p id="test1">foo</p> <p id="test1" style="color: yellow;">foo</p>​

Look for an element in a snippet

The following script loads a snippet. Then it looks up an element in a snippet and sets its text. Finally, it replaces the elements matched by the script's selector by the snippet.

var snippet = loadhtml('snippets/mysnippet.html'); 
query("#foo", snippet).text("bar");
results.replaceWith(snippet);