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("*");

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.

Working with pecker selectors

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.

Property selectors

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

Selector

Description

.class

Keeps nodes with a specific class name.

//keep all div nodes with a class of nodeClass
dom.q("div.nodeClass");

&name

Keeps nodes with a specific name attribute.

//keep all input nodes with a name of username
dom.q("input&username");

_type

Keeps nodes with a matching type.

//keep all radio input nodes
dom.q("input_radio");

Using these pecker selectors as our base, we can begin adding selector features to build up our advanced queries.

Attribute selectors

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

Selector

Description

[ attribute ]

Keeps nodes with the specified attribute.

//keep all input nodes that have a type attribute
dom.q("input [type]");

[ attribute = value ]

Keeps nodes with the specified attribute that matches a provided value.

//keep all input nodes that have a type of text
dom.q("input [type = text]");

[ attribute != value ]

Keeps nodes with the specified attribute that does not match a provided value.

//keep all input nodes that do not have a type of radio
dom.q("input [type != radio]");

[ attribute *= value ]

Keeps nodes with the specified attribute that contains a provided value.

//keep all image nodes that have alt text containing logo
dom.q("img [alt *= logo]");

[ attribute ^= value ]

Keeps nodes with the specified attribute that starts with a provided value.

//keep all span nodes that have a class attribute starting with small
dom.q("span [class ^= small]");

[ attribute $= value ]

Keeps nodes with the specified attribute that ends with a provided value.

//find all .gif format images
dom.q("img [src $= gif]");

[ attribute ~= value ]

Keeps nodes with the specified attribute that contains a provided value as an element in a space-separated list. This is the same as using the .class pecker selector.

//keep all div nodes that contain the class of large
dom.q("div [class ~= large]");

[ attribute |= value ]

Keeps nodes with the specified attribute that contains a provided value as an element in a hyphen-separated list.

//keep all div nodes with a margin style (inc. margin-left, etc.)
dom.q("div [style |= margin]");

These highly targeted attribute search features will give you fine-grained control over the results returned in the bunch from your query.

State selectors

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

: first

Keeps the first node in the bunch.

: rest

Keeps all nodes in the bunch except for the first one.

: even

Keeps half of the nodes in the bunch, starting with the second node.

: odd

Keeps half of the nodes in the bunch, starting with the first node.

: hidden

Keeps all nodes in the bunch that are currently hidden.

: visible

Keeps all nodes in the bunch that are currently visible.

: disabled

Keeps all nodes in the bunch that are in a disabled state.

: enabled

Keeps all nodes in the bunch that are in an enabled state.

: checked

Keeps all nodes in the bunch that are checked (e.g., checkbox).

: unchecked

Keeps all nodes in the bunch that are unchecked.

: focus

Keeps the node that currently has focus.

: blur

Keeps all nodes that do not currently have focus.

: text

Keeps all text nodes.

: tag

Keeps all nontext nodes.

: trim

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.

Building advanced querying methods with hunter and pecker selectors

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

*_text

Select all nodes with their type parameter set to text (type=text).

*:text

Select all text nodes.

div + span * : text

Select the text that is within span tags that immediately follow div tags.

input [value*=profile]

Select all input tags that have a value containing the word “profile”.

form input_hidden

Select all hidden fields in a form.

form input:hidden

Select all input fields that are hidden within a form.

input_radio&date:unchecked

Select any radio buttons that have a name property of date and are unchecked.

div.container.color

Select all div nodes that have a class containing both container and color.

#profileForm button_submit

Select the submit button within the form with the ID of profileForm.

ol//:enabled:hidden

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.232.189