Mojo :: DOM :: CSS (source | english)

TABLE OF CONTENTS

NAME

Mojo::DOM::CSS - CSS 选择器引擎

SYNOPSIS

use Mojo::DOM::CSS;

# 从 DOM 树中选择元素
my $css = Mojo::DOM::CSS->new(tree => $tree);
my $elements = $css->select('h1, h2, h3');

DESCRIPTION

这个 Mojo::DOM::CSS 是给 Mojo::DOM 用的 CSS 选择器引擎.

SELECTORS

支持全部的 CSS 选择,这就是一个独立的 CSS 解析器.

BASE

最基本的东西

*

全部的成员元素.

my $all = $css->select('*');

E

E 型的元素对象, 注意这个 E 是指的 DOM 中的一个元素的意思,E 是 element 的简写, 英文翻译过来是"元素", 所以element其实就是 html 已经定义的标签元素,例如 div, input, a 等等. ,下面不在重复解释.

my $title = $css->select('title');

E.warning

my $warning = $css->select('div.warning');

在元素 E 中, 找到类名为 "warning" 的元素。

E#myid

my $foo = $css->select('div#foo');

在元素 E 中, 找到 ID 为 "myid" 的元素.

E:not(s)

在元素 E 中不匹配简单的选择器 s 中指定的内容.

my $others = $css->select('div p:not(:first-child)');

属性过滤(Attribute Filters)

属性过滤(Attribute Filters)的内容就是 html 元素中的属性,例如 name, id, class 但是不是指的其值, 是指属性本身.

E[foo]

E 元素有一个 foo 属性, 例如下面有个 a 的元素中有个 href 的属性。

my $links = $css->select('a[href]');

E[foo="bar"]

匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 foo 的 input 元素.

my $fields = $css->select('input[name="foo"]');

E[foo~="bar"]

元素 E 中有一个 foo 的属性并且是一个以空格分隔的列表值,这是指基中和 bar 相等的一个.

my $fields = $css->select('input[name~="foo"]');

E[foo^="bar"]

元素 E 中有一个 foo 的属性值是以 bar 字符开头。

my $fields = $css->select('input[name^="f"]');

E[foo$="bar"]

元素 E 中有一个 foo 的属性值是以 bar 字符结束.

my $fields = $css->select('input[name$="o"]');

E[foo*="bar"]

元素 E 中有一个 foo 的属性值中包含 bar 的子字符串。

my $fields = $css->select('input[name*="fo"]');

表单过滤(Form Filters) ,内容过滤(Content Filters) 和后代过滤(Child Filters)

用于对表单进行过滤, 和内容进行过滤

E:root

元素 E 的根文档

my $root = $css->select(':root');

E:checked

在元素 E 中匹配所有选中的被选中元素(比如一个单选按钮或复选框).

my $input = $css->select(':checked');

E:empty

在元素 E 没有子元素或者文本的空元素.

my $empty = $css->select(':empty');

E:nth-child(n)

这个和下面几个都是后代过滤(Child Filters)。

在元素 E 中,其父节点的第 n 个子节点,匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.

my $third = $css->select('div:nth-child(3)');
my $odd   = $css->select('div:nth-child(odd)');
my $even  = $css->select('div:nth-child(even)');
my $top3  = $css->select('div:nth-child(-n+3)');

E:nth-last-child(n)

在元素 E 中,在父元素中匹配第 n 个子元素的最后一个.

my $third    = $css->select('div:nth-last-child(3)');
my $odd      = $css->select('div:nth-last-child(odd)');
my $even     = $css->select('div:nth-last-child(even)');
my $bottom3  = $css->select('div:nth-last-child(-n+3)');

E:nth-of-type(n)

在元素 E 中,指定类型的 n 个兄弟元素.

my $third = $css->select('div:nth-of-type(3)');
my $odd   = $css->select('div:nth-of-type(odd)');
my $even  = $css->select('div:nth-of-type(even)');
my $top3  = $css->select('div:nth-of-type(-n+3)');

E:nth-last-of-type(n)

元素 E 中,指定类型的 n 个兄弟元素中的最后一个.

my $third    = $css->select('div:nth-last-of-type(3)');
my $odd      = $css->select('div:nth-last-of-type(odd)');
my $even     = $css->select('div:nth-last-of-type(even)');
my $bottom3  = $css->select('div:nth-last-of-type(-n+3)');

E:first-child

元素 E 中,匹配父元素中找到的第一个子元素.

my $first = $css->select('div p:first-child');

E:last-child

元素 E 中,匹配父元素中找到的最后一个子元素.

my $last = $css->select('div p:last-child');

E:first-of-type

元素 E 中,匹配到类型的兄弟元素中的第一个.

my $first = $css->select('div p:first-of-type');

E:last-of-type

元素 E 中,匹配到类型的兄弟元素中的最后一个.

my $last = $css->select('div p:last-of-type');

E:only-child

元素 E 中, 匹配到父元素的唯一的子元素

my $lonely = $css->select('div p:only-child');

E:only-of-type

元素 E 中, 匹配到指定类型元素的唯一的兄弟元素

my $lonely = $css->select('div p:only-of-type');

层次(Hierarchy)

使用构造的选择符来层层过滤DOM元素.

E F

E 元素有个后代元素 F

my $headlines = $css->select('div h1');

E > F

在元素 E 上有个 F 的子元素, 在给定的父元素下匹配所有子元素.

my $headlines = $css->select('html > body > div > h1');

E + F

匹配所有紧接在 E 元素后的 F 元素.

my $second = $css->select('h1 + h2');

E ~ F

匹配 E 元素之后的所有 F 元素, F 是指兄弟元素。

my $second = $css->select('h1 ~ h2');

E, F, G

元素类型只要是 E, FG 这三个都能匹配。

my $headlines = $css->select('h1, h2, h3');

E[foo=bar][bar=baz]

E 元素中其属性符合条件的所有的属性选择器。

my $links = $css->select('a[foo^="b"][foo$="ar"]');

对象的属性

Mojo::DOM::CSS 实现了下列对象的属性

tree

my $tree = $css->tree;
$css     = $css->tree(['root', [qw(text lalala)]]);

文档对象模型。请注意,这个结构应该非常小心,因为它是非常动态的。

METHODS

Mojo::DOM::CSS inherits all methods from Mojo::Base and implements the following new ones.

select

my $results = $css->select('head > title');

Run CSS selector against tree.

SEE ALSO

Mojolicious, Mojolicious::Guides, http://mojolicio.us.