Mojoliciousドキュメント日本語訳

名前

Mojo::DOM::CSS - CSSセレクタエンジン

使い方

use Mojo::DOM::CSS;

# DOMツリーから要素を選択
my $css = Mojo::DOM::CSS->new(tree => $tree);
my $elements = $css->select('h1, h2, h3');

説明

Mojo::DOM::CSSはMojo::DOMで利用されるCSSセレクタエンジンです。 HTML Living StandardとSelectors Level 3に基づきます。

セレクタ

スタンドアロンパーサに理解できるすべての CSSセレクタがサポートされます。

*

全ての要素

my $first = $dom->at('*');

E

要素名が E である要素。

my $title = $dom->at('title');

E[foo]

foo 属性を持つ E 要素。

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

E[foo="bar"]

foo 属性を持ち、その値が正に bar と等しい E 要素。

my $case_sensitive = $css->select('input[type="hidden"]');
my $case_sensitive = $css->select('input[type=hidden]');

E[foo="bar" i]

foo属性の値がbarにあらゆる(ASCIIの範囲)ケース順序で完全に一致するE要素。 このセレクタは実験的なものなので、警告なしに変更されます。

my $case_insensitive = $css->select('input[type="hidden" i]');
my $case_insensitive = $css->select('input[type=hidden i]');
my $case_insensitive = $css->select('input[class~="foo" i]');

このセレクタはSelectors Level 4 です。これはまだ仕様策定中のものです。

E[foo~="bar"]

foo 属性の値が、空白文字で区切られた幾つかの値であり、 その内のひとつが正に bar と等しい E 要素。

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

E[foo^="bar"]

foo 属性の値が正に文字列 bar で始まる E 要素。

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

E[foo$="bar"]

foo 属性の値が正に文字列 bar で終わる E 要素。

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

E[foo*="bar"]

foo 属性の値が文字列 bar を含んでいる E 要素。

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

E:root

文書のルートである E 要素。

my $root = $dom->at(':root');

E:nth-child(n)

その親に対して n 番目の子である E 要素。

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

E:nth-last-child(n)

その親に対して、最後の子から数え始めて n 番目の子である E 要素。

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

E:nth-of-type(n)

同じ要素名を持つ兄弟要素のうちの n 番目である E 要素。

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

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

同じ要素名を持つ兄弟要素のうち、最後のものから数え始めて n 番目である E 要素。

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

E:first-child

その親の最初の子である E 要素。

my $first = $dom->at('div p:first-child');

E:last-child

その親の最後の子である E 要素。

my $last = $dom->at('div p:last-child');

E:first-of-type

同じ要素名を持つ兄弟要素のうちの、最初の E 要素。

my $first = $dom->at('div p:first-of-type');

E:last-of-type

同じ要素名を持つ兄弟要素のうちの、最後の E 要素。

my $last = $dom->at('div p:last-of-type');

E:only-child

その親の唯一の子である E 要素。

my $lonely = $dom->at('div p:only-child');

E:only-of-type

他に同じ要素名の兄弟を持たない E 要素。

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

E:empty

(テキストノードを含む)子を持たない E 要素。

my $empty = $dom->find(':empty');

E:link

ターゲットがまだ尋ねられていない(:link)か、すでに尋ねられている(:visited)のハイバーリンクのソースアンカーであるE要素。

Mojo::DOM::CSSは、状態を持たないので、:linkと:visitedは、まったく同じ結果になることに注意してください。

my $links = $css->select(':link');
my $links = $css->select(':visited');

E:visited

「E:link」のエイリアス。

E:checked

チェックされたユーザインターフェース要素である E 要素 (例えば、ラジオボタンやチェックボックス)。

my $input = $dom->at(':checked');

E.warning

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

class が "warning" である E 要素。 (訳注: class 属性は、空白文字で区切られた複数の値を持つことができ、 上記例ではそれらの値の一つが "warning" である div 要素が選択されます)

E#myid

ID が "myid" に等しい E 要素。

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

E:not(s1, s2)

合体セレクタ s1あるいはs2 にマッチしない E 要素。複合セレクタは実験的で、警告なしに変更される可能性があります。

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

このセレクタはSelectors Level 4の一部で、まだ策定中です。

E:matches(s1, s2)

合体セレクタ s1あるいはs2 にマッチする E 要素。複合セレクタは実験的で、警告なしに変更される可能性があります。

my $headers = $css->select(':matches(section, article, aside, nav) h1');

このセレクタはSelectors Level 4の一部で、まだ策定中です。

A|E

CSS Namespaces Module Level 3からの名前空間エイリアスAに属する要素E。 セレクタメソッドに渡されたキーと価のペアは名前空間エイリアスを決定します。

my $elem = $css->select('lq|elem', lq => 'http://example.com/q-markup');

名前空間に属さない要素を探すために、空のエイリアスを使用できます。

my $div = $c->select('|div');

E F

E 要素の子孫である F 要素。

my $headlines = $dom->find('div h1');

E > F

E 要素の子である F 要素。

my $headlines = $dom->find('html > body > div > h1');

E + F

直前に E 要素がある F 要素。

my $second = $dom->find('h1 + h2');

E ~ F

前に E 要素がある F 要素。

my $second = $dom->find('h1 ~ h2');

E, F, G

要素名が E または F または G である要素。

my $headlines = $dom->find('h1, h2, h3');

E[foo=bar][bar=baz]

その属性が、後続の全ての属性セレクタにマッチする E 要素。

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

属性

Mojo::DOM::CSSは次の属性を実装しています。

tree

my $tree = $css->tree;
$css     = $css->tree(['root']);

ドキュメントオブジェクトモデル。 この構造は、とても動的なので、とても慎重に利用されるべきです。

メソッド

Mojo::DOM::CSSはMojo::Baseからすべてのメソッドを継承しており、 次の新しいメソッドを実装しています。

matches

my $bool = $css->matches('head > title');

treeにおける最初のノードに対応するCSSセレクタにマッチするかどうかの確認。

select

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

treeに対してCSSセレクタを実行します。

select_one

my $result = $css->select_one('head > title');

treeに対してCSSセレクタを実行し、最初のノードがマッチするとすぐに停止します。

参考

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

(Mojolicious 8.12を反映。2019年5月14日更新)

関連情報

Perlクラブ