Programming Social Applications

DOM Selection with the Query Method

One fantastic feature that ADsafe makes available for third-party code developers is a simple method, q, for performing DOM selection tasks. With this method, you can return one or more node elements and use id or tagName selectors with additional levels of criteria to filter that data into smaller subsets depending on your requirements.

Given that a new ADsafe widget has been instantiated with the go(...) method and uses a variable dom within the function that wraps the third-party code, providing limited access to the true DOM of the root page:

ADSAFE.go("APPNAME_", function(dom){ ... }

we can use the q method, made available through the dom variable, to perform DOM selection on elements within the third-party widget code:

dom.q("#APPNAME_NODEID");

The hunter selector #APPNAME_NODEID is just one way to capture an element within the DOM based on a provided ID. The q(...) method provides a number of other hunter selectors that we can use for the same task, as shown in Table 8-4.

Table 8-4. Query method hunter selectors

Selector	Description
# id	Return the node whose ID matches that located in the selector. dom.q("#APPNAME_DATA");
tagName	Return all nodes that match the tag name in the selector. dom.q("span");
+ tagName	Select all immediate sibling nodes with a matching tag name. dom.q("+p");
> tagName	Select all immediate child nodes with a matching tag name. dom.q(">div");
/	Select all immediate child nodes. dom.q("/");
*	Select all descendent nodes. dom.q("*"); ...