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
DOM selection through the query method in ADsafe is the foundation for effectively working with the application or site’s markup. It allows us to attach events to nodes, obtain values for properties and user-entered data, and set new values and properties dynamically.
The hunter selectors listed in Table 8-4 are just the start of what we can do with the query method. Concatenating query hunter selectors with specific pecker selectors will allow us to filter the query method to return a wide array of results, depending on the specific needs of the application or site.
Pecker selectors are additional search parameters that allow you to filter the query method to search for node properties, attributes, or even the state of the nodes themselves. Using these features, we can set up a network of advanced querying features to drill down to only the specific nodes that we are looking for.
Using property selectors allows us to filter a query and its resulting bunch object for a broad list of matching nodes based on the node class, name, and type. These selectors, shown in Table 8-5, will often come up in queries that are run against the markup of the ADsafe application or site.
Table 8-5. Property selectors
Using these pecker selectors as our base, we can begin adding selector features to build up our advanced queries.
Getting into more specific pecker selectors now, we can use attribute selectors (Table 8-6) to search for nodes with attributes that do or do not contain specific values. These searches are much like using a regex search algorithm against a string in that they allow you to return a bunch containing only nodes that have a value, don’t have a value, start or end with a value, contain a value, or meet a number of other search parameters.
Table 8-6. Attribute selectors
These highly targeted attribute search features will give you fine-grained control over the results returned in the bunch from your query.
Our last group of pecker selector is state selectors (Table 8-7), which allow you to take your queries down to an even deeper level of specificity. The main types of searches you can perform using the state pecker selectors are those that need to return only a specific number of nodes in the bunch object; only nodes that have a specific enabled, visible, checked, or focused status; or only nodes of a specific type.
Table 8-7. State selectors
Selector | Description |
---|---|
| Keeps the first node in the bunch. |
| Keeps all nodes in the bunch except for the first one. |
| Keeps half of the nodes in the bunch, starting with the second node. |
| Keeps half of the nodes in the bunch, starting with the first node. |
| Keeps all nodes in the bunch that are currently hidden. |
| Keeps all nodes in the bunch that are currently visible. |
| Keeps all nodes in the bunch that are in a disabled state. |
| Keeps all nodes in the bunch that are in an enabled state. |
| Keeps all nodes in the bunch that are checked (e.g., checkbox). |
| Keeps all nodes in the bunch that are unchecked. |
| Keeps the node that currently has focus. |
| Keeps all nodes that do not currently have focus. |
| Keeps all text nodes. |
| Keeps all nontext nodes. |
| Keeps nontext nodes with no values. |
State selectors offer you a deeper range of search utilities on top of the property and attribute searches described previously.
Now that we have covered the myriad of hunter and pecker selectors available to us for our searches, we can begin to build out advanced queries to return nodes using highly targeted algorithms.
Even though the basic selectors we’ve discussed will allow you to capture the majority of the nodes that you want to work with in a page, you can also take advantage of some advanced selection options (Table 8-8) that are made available by concatenating several selectors together.
Table 8-8. Advanced selectors
Selector | Description |
---|---|
| Select all nodes with
their |
| Select all text nodes. |
| Select the text that is
within |
| Select all |
| Select all hidden fields in a form. |
| Select all input fields that are hidden within a form. |
| Select any radio
buttons that have a |
| Select all |
| Select the submit
button within the form with the ID of |
| Selects all hidden, enabled tags that are grandchildren within an ordered list. |
Using advanced selection options will allow you to drill down to exactly the nodes that you want to work with.
3.144.232.189