Class | HTML::Selector |
In: |
lib/action_controller/vendor/html-scanner/html/selector.rb
|
Parent: | Object |
Selects HTML elements using CSS 2 selectors.
The Selector class uses CSS selector expressions to match and select HTML elements.
For example:
selector = HTML::Selector.new "form.login[action=/login]"
creates a new selector that matches any form element with the class login and an attribute action with the value /login.
Use the match method to determine if an element matches the selector.
For simple selectors, the method returns an array with that element, or nil if the element does not match. For complex selectors (see below) the method returns an array with all matched elements, of nil if no match found.
For example:
if selector.match(element) puts "Element is a login form" end
Use the select method to select all matching elements starting with one element and going through all children in depth-first order.
This method returns an array of all matching elements, an empty array if no match is found
For example:
selector = HTML::Selector.new "input[type=text]" matches = selector.select(element) matches.each do |match| puts "Found text field with name #{match.attributes['name']}" end
Selectors can match elements using any of the following criteria:
When using a combination of the above, the element name comes first followed by identifier, class names, attributes, pseudo classes and negation in any order. Do not separate these parts with spaces! Space separation is used for descendant selectors.
For example:
selector = HTML::Selector.new "form.login[action=/login]"
The matched element must be of type form and have the class login. It may have other classes, but the class login is required to match. It must also have an attribute called action with the value /login.
This selector will match the following element:
<form class="login form" method="post" action="/login">
but will not match the element:
<form method="post" action="/logout">
Several operators are supported for matching attributes:
For example, the following two selectors match the same element:
#my_id [id=my_id]
and so do the following two selectors:
.my_class [class~=my_class]
Complex selectors use a combination of expressions to match elements:
Since children and sibling selectors may match more than one element given the first element, the match method may return more than one match.
Pseudo classes were introduced in CSS 3. They are most often used to select elements in a given position:
As you can see, <tt>:nth-child<tt> pseudo class and its variant can get quite tricky and the CSS specification doesn‘t do a much better job explaining it. But after reading the examples and trying a few combinations, it‘s easy to figure out.
For example:
table tr:nth-child(odd)
Selects every second row in the table starting with the first one.
div p:nth-child(4)
Selects the fourth paragraph in the div, but not if the div contains other elements, since those are also counted.
div p:nth-of-type(4)
Selects the fourth paragraph in the div, counting only paragraphs, and ignoring all other elements.
div p:nth-of-type(-n+4)
Selects the first four paragraphs, ignoring all others.
And you can always select an element that matches one set of rules but not another using :not. For example:
p:not(.post)
Matches all paragraphs that do not have the class .post.
You can use substitution with identifiers, class names and element values. A substitution takes the form of a question mark (?) and uses the next value in the argument list following the CSS expression.
The substitution value may be a string or a regular expression. All other values are converted to strings.
For example:
selector = HTML::Selector.new "#?", /^\d+$/
matches any element whose identifier consists of one or more digits.
Creates a new selector from a CSS 2 selector expression.
The first argument is the selector expression. All other arguments are used for value substitution.
Throws InvalidSelectorError is the selector expression is invalid.
Matches an element against the selector.
For a simple selector this method returns an array with the element if the element matches, nil otherwise.
For a complex selector (sibling and descendant) this method returns an array with all matching elements, nil if no match is found.
Use +first_only=true+ if you are only interested in the first element.
For example:
if selector.match(element) puts "Element is a login form" end
Return the next element after this one. Skips sibling text nodes.
With the name argument, returns the next element with that name, skipping other sibling elements.
Selects and returns an array with all matching elements, beginning with one node and traversing through all children depth-first. Returns an empty array if no match is found.
The root node may be any element in the document, or the document itself.
For example:
selector = HTML::Selector.new "input[type=text]" matches = selector.select(element) matches.each do |match| puts "Found text field with name #{match.attributes['name']}" end
Similar to select but returns the first matching element. Returns nil if no element matches the selector.
Create a regular expression to match an attribute value based on the equality operator (=, ^=, |=, etc).
Called to create a dependent selector (sibling, descendant, etc). Passes the remainder of the statement that will be reduced to zero eventually, and array of substitution values.
This method is called from four places, so it helps to put it here for reuse. The only logic deals with the need to detect comma separators (alternate) and apply them to the selector group of the top selector.
Returns a lambda that can match an element against the nth-child pseudo class, given the following arguments: