Waffle Recipes

How-To's and Tutorials for the ActiveWAFL Framework

How to Select HTML Elements from Javascript

Posted Dec 17, 2014

DblEj provides several global “selector” helper functions for selecting elements in Javascript on the client-side.

All selector functions begin with one or two dollar-signs ($ or $$).

$… = Singular selector

$$… = Plural selector

Singular selectors (those that start with one dollar sign) will always return the first matching element.

Plural selectors (those that start with two dollar signs) will always return an iteratable nodelist of all the matching elements.

$q, $$q - Get Elements by CSS Path (JQuery-style selectors)

Examples:

Get all divs of the Panel class:

var panelDivs = $$q(“div .Panel”);

Get all divs and tables that have the hidden attribute set:

var hiddenElements = $$q(“div [hidden], table [hidden]“);

Get the first li of the .Selected class beneath the ul named MasterList:

var selectedElement = $q(“ul#MasterList li”);

$ - Get element by ID

Get an element based on it’s HTML id.  Since id is a unique attribute, there is no plural selector.

Examples:

Get the element that has an id of “Foo”:

var elem = $(“Foo”);

Update the inner text of the div with an id of “Bar”:

$(“Bar”).SetText(“Waffles are a delicious treat!”);

$class, $$class - Get elements by their CSS class

Get an element based on it’s CSS class.

Examples:

Get the first element that has the class “Foo” on it:

var elem = $class(“Foo”);

Add a click handler to all elements with the “Clickable” class on it:

$$class(“Clickable”).AddClickHandler(function(event) { alert(“The clickable element was clicked”); }