第5章 エレメント

目次

5.1. エレメントの属性
5.1.1. 属性を追加する

5.1. エレメントの属性

5.1.1. 属性を追加する

HTML コンテンツ内におけるエレメントとして示されるドキュメントは、 その要素(タグ)内に様々な「属性」をあわせて所持することで、 特定の意味を持つ内容として表現されます。 例えば次のような、H1 要素に id 属性を付与し(そしてそれがスタイルを適応する情報として利用されて)タイトルとして表現されたものであったり、 A 要素に href 要素を付与して他のHTTPリソースへのリンクを表現したりといった具合にです。

<h1 id="title">Hello, World!</h1>
<a href="http://example.com/">Example Link</a>

Runemaster では指定する特定のエレメントに対して、 属性の名称および値のセットをまとめて追加することができます。

この機能を利用するために HTML テンプレートへ何かしらの記述を行う必要は特にありません。 強いてあげるならば、属性を追加する対象となるエレメントに対して、 既に HTML ドキュメントとしてのマークアップが施されていることです。 (ドキュメント内にユニークな存在であろう id 属性を付与する、 まとめて追加する対象として共通の class 属性を付与する、など。)

属性の追加を行うには、プログラムより setAttribute メソッドを実行します。 setAttribute メソッドへは、第一パラメータとして属性を追加したい対象となるエレメントを示す「セレクタルール」(後述します)をセットし、 第二パラメータには、属性の名称とその値をプロパティおよび値とするオブジェクトをセットします。

次のコード例では、H1 向け、A 向けにそれぞれ属性セットとなるオブジェクトを作成し、 setAttribute メソッドで追加処理を行っています。 1つ目の setAttribute メソッドでは「id="title"」を持つエレメントをセレクタルールで指定しており、 また2つ目の setAttribute メソッドでは A をもつ全てのエレメントを指定しています。

例 5.1. エレメントへ属性を追加

PHP コード
$master = new Rune_Master('/path/to/templateDirectory');

$h1Attribute = new stdClass();
$h1Attribute->lang = 'ja';

$linkAttribute = new stdClass();
$linkAttribute->class = 'external';

$master->setAttribute('#title', $h1Attribute);
$master->setAttribute('a', $linkAttribute);
$master->cast('example');
実行結果
<h1 id="title" lang="ja">Hello, World!</h1>
<a href="http://example.com/" class="external">Example Link</a>

エレメントを指定するために利用するセレクタルールは、以下の表のようなものがあります。 これらセレクタルールは、Runemaster 内で利用されているライブラリである PHP Simple HTML DOM Parser (http://simplehtmldom.sourceforge.net/) の仕組みに基づいたものとなっています。 そしてそれは、Javascript ライブラリの jQuery (http://jquery.com/) で利用されている「セレクタ」構文に似た仕様となっています。

表 5.1. セレクタルール例

種類 セレクタ例 エレメント例
エレメント(要素、タグ)名称 span ドキュメント内の <span>
id 属性 #foo id="foo" を持つエレメント
span#foo id="foo" を持つ <SPAN>
class 属性 .foo class="foo" を持つエレメント
span.foo class="foo" を持つ <span>
指定する属性 [name] name 属性を持つエレメント
input[name] name 属性を持つ <INPUT>
指定する属性と値 [name="foo"] name="foo" を持つエレメント
[name!="foo"] name="foo" を持たないエレメント
[name^="foo"] foo から始まる name 属性を持つエレメント
[name$="foo"] foo で終わる name 属性を持つエレメント
[name*="foo"] foo を含む name 属性を持つエレメント
内部のエレメント table.foo tr <TABLE class="foo"> 内の <TR>