オブジェクト索引
HTMLElements オブジェクトは、基本的に HTMLElement オブジェクトの配列です。
HTMLElements オブジェクトは、例えば、HTMLDocument や HTMLElement オブジェクトに対する select() メソッドの呼び出しによって得られます。一般に select() の結果として複数の HTMLElement オブジェクトが抽出されるため、select() メソッドの戻り値はいつも HTMLElements になります。
抽出されたすべての HTMLElement に対して、同じ処理を行いたい場合、例えば class 属性を付け加えたい場合など、 select() の結果が単なる HTMLElement オブジェクトの配列だとすると、個々の HTMLElement について処理を行うために、wr-for などの繰り返し構文を使って処理を記述しなければなりません。例えば、下記のような記述になります。
....
<wr-variable name='images' value='parseHtml(htmlText).select("img")' />
<wr-for list="images.asArray()" variable="img">
%img.addClass("shadow")%
</wr-for>
....こういった処理をあちこちで記述するのは面倒なものです。そこで HTMLElements オブジェクトが使われます。 例えば HTMLElements オブジェクトの addClass() メソッドを使えば、先のコードは、下記の様に簡潔に記述できます。これだけのコードで、select() されたすべての img 要素に class="shadow" を付加することができます。
....
%parseHtml(htmlText).select("img").addClass("shadow")%
....HTMLElements オブジェクトは HTMLElement オブジェクトの配列ですが、wr-for で使用する場合には、下記のように asArray() メソッドを使ってください。
....
<wr-variable name='images' value='parseHtml(htmlText).select("img")' />
<wr-for list="images.asArray()" variable="img">
%img.addClass("shadow")%
</wr-for>
....HTMLElements オブジェクトは、その中にマッチする要素をひとつも含んでいない場合には isNull() 関数で true が返されます。
....
<wr-variable name="p" value='parseHtml("<p>Hello</p>").select("p")' />
<wr-->
パースされた html 中には p 要素がひとつあります。
変数 p に代入された HTMLElements 要素の size() は 1 になります。
</wr-->
<h1>isNull:%isNull(p)%</h1>
<h1>isNotNull:%isNotNull(p)%</h1>
<wr-variable name="li" value='parseHtml("<p>Hello</p>").select("li")' />
<wr-->
パースされた html 中には li 要素がありません。
変数 li に代入された HTMLElements 要素の size() は 0 になります。
</wr-->
<h1>isNull:%isNull(li)%</h1>
<h1>isNotNull:%isNotNull(li)%</h1>
....この展開の実行結果は下記のようになります。
....
<h1>isNull:false</h1>
<h1>isNotNull:true</h1>
<h1>isNull:true</h1>
<h1>isNotNull:false</h1>
....| メソッド名 | 説明 |
|---|---|
| addClass(className) | 各要素に className で指定した class 属性を一括して追加する |
| addStyle(style) | 各要素に style で指定した style 属性を一括して追加する |
| asArray() | 保持している HTMLElement オブジェクトを配列にして返す |
| attr(attributeName) | attributeName で指定した属性の属性値を取得する |
| attr(attributeName, attributevalue) | 各要素に対して属性値を一括設定する |
| first() | 先頭にある HTMLElement オブジェクトを返す |
| hasAttr(attributeName) | 指定された属性値を持つ HTMLElement が存在するか判定する |
| hasClass(className) | 指定された class 属性をを持つ HTMLElement が存在するか判定する |
| html() | 各 HTMLElement オブジェクトの、内側の html を連結したものを返す |
| html(html) | 各 HTMLElement の 内側の html を設定する |
| is(selector) | selector にマッチする要素があるか判定する |
| last() | 最後にある HTMLElement オブジェクトを返す |
| not(selector) | selector にマッチしない要素を抽出する |
| outerHtml() | 各 HTMLElement オブジェクトの html を連結したものを返す |
| remove() | 各要素を文書から削除する |
| removeAttr(attributeName) | 各要素から attrKey で指定した属性を一括削除する |
| removeClass(className) | 各要素の class 属性から className を一括削除する |
| select(selector) | 各要素から selector で指定された CSS セレクタを持つ要素を抽出する |
| size() | 保持している HTMLElement の数を返す |
| tagName(newTagName) | 各要素のタグ名を newTagName に書き換える |
| tlggleClass(className) | 各要素に class 属性を追加または削除する |
この HTMLElements オブジェクトが保持している複数の要素に、一括して class 属性を追加します。
追加したい class 属性の名前を指定します。
HTMLElements オブジェクト
複数の HTMLElement オブジェクトに対して一括して class 属性を設定できる点を除いて、HTMLElement オブジェクトの addClass() メソッドと同じです。HTMLElement の addClass() メソッドの説明も参照してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<body>
<ul class="menu">
<li>menuItem1</li>
<li>menuItem2</li>
</ul>
</body>この中にある li 要素の class 属性に "menuItem" と "listItem" を追加してから、body 全体を展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").addClass("menuItem").addClass("listItem")%
%doc.body().outerHtml()%
</html>parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。
doc に対して select("li") を実行し li 要素を取り出します。この例では 2 件取り出されます。
select() の結果得られた li 要素 2 件を含む HTMLElements オブジェクトに対して addClass("menuItem") と addClass("ItemList") を実行し class 属性を追加します。
最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul class="menu">
<li class=" menuItem listItem">menuItem1</li>
<li class=" menuItem listItem">menuItem2</li>
</ul>
</body>
</html>removeClass(className) メソッドも参照してください。
この HTMLElements オブジェクトが保持している複数の HTMLElement オブジェクトに、一括して style 属性を追加します。
追加する style 属性を文字列で指定します。
HTMLElements オブジェクト
既に style 属性が付けられている要素に対して呼び出しても大丈夫です。その場合、既に付けられている style 属性の末尾に、style で指定した文字列が付加されます。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<body>
<ul>
<li>menuItem1</li>
<li>menuItem2</li>
<li>menuItem3</li>
</ul>
</body>この中にある li 要素を取り出し、その要素の style 属性に "list-style-type: square;" を追加してから、展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").addStyle("list-style-type: square;")%
%doc.body().outerHtml()%
</html>parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。
doc に対して select("li") を実行し li 要素を取り出します。この例では 3 件取り出されます。
select() の結果得られた HTMLElements オブジェクトに対して addStyle("list-style-type: square;") を実行し style 属性に "list-style-type: square;" を追加します。
最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。
展開の実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul>
<li style="list-style-type: square;">menuItem1</li>
<li style="list-style-type: square;">menuItem2</li>
<li style="list-style-type: square;">menuItem3</li>
</ul>
</body>
</html>この HTMLElements オブジェクトが保持している HTMLElement オブジェクトを配列にして返します。
HTMLElement オブジェクトの配列
HTMLElements に保持されている HTMLElement を配列として扱いたい場合に利用します。主な利用局面は HTMLElements を wr-for の list= に渡す場合です。list= に渡してループする場合には、HTMLElements をそのまま渡すのではなく、asArray() メソッドを呼び出した結果を list= に渡すようにしてください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<body>
<ul>
<li>menuItem1</li>
<li>menuItem2</li>
<li>menuItem3</li>
</ul>
</body>この htmlText の中から li 要素の本体を切り出して展開結果に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-for list="parseHtml(htmlText).select(\"li\").asArray()" variable="x">
%x.html()%<br>
</wr-for>
</html>parseHtml() で htmlText をパースして HTMLDocument オブジェクトを生成してから、select("li") を実行し htmlText 中の li 要素を抽出します。抽出した li 要素を保持している HTMLElements オブジェクトの asArray() メソッドを呼び出して、HTMLElement の配列を取得しそれを wr-for の list= に渡してループしています。
HTMLElements は HTMLElement の配列ですが、それをそのまま wr-for の list= に渡すことができませんので、select() の結果でループを実行したい場合には、asArray() メソッドを呼び出した結果を list= に指定してください。
この展開の実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
menuItem1
<br> menuItem2
<br> menuItem3
<br>
</body>
</html>指定した名前の属性値を取得します。
取得したい属性の名前を指定します。
属性の値を文字列で返します。もし該当する HTMLElement が存在しない場合、空文字列が返されます。
この HTMLElements に含まれる HTMLElement の中で、attributeName に指定された名前の属性を持つ最初の HTMLElement に指定されているその属性の値を返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<a href="https://www.frameworks.co.jp/">www.frameworks.co.jp</a><br>
</body>
</html>この htmlText を下記のような展開で処理してみます。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<h1>%parseHtml(htmlText).body().select("*").attr("href")%</h1>
</body>
</html>parseHtml() 関数で htmlText をパースして body 要素を取り出してから body に対して select("*") を実行して全要素を取り出します。この時点で得られた HTMLElements には p 要素と a 要素が含まれています。
その後、この HTMLElements に対して attr("href") を実行しています。結果として得られるのは HTMLElements 中の２番目の a 要素の href 属性の値になります。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>https://www.frameworks.co.jp/</h1>
</body>
</html>attr(attributeName, attributeValue) メソッドも参照してください。
この HTMLElements に含まれるすべての要素に対して属性値を設定します。
設定したい属性の名前を指定します。
設定したい属性の値を指定します。指定した文字列中の & や ' や " などは自動でエスケープされますので、事前にエスケープしておく必要はありません。
HTLElements オブジェクト
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<!DOCTYPE html>
<html>
<head><title>HTMLElements.attr(key,val) の example</title></head>
<body>
<p>Hello World!</p>
<a href="https://www.frameworks.co.jp/" target="_top">www.frameworks.co.jp</a><br>
<a href="https://www.example.com/">www.example.com</a><br>
<p>Good byte.</p>
</body>
</html>この htmlText の中にあるすべての a 要素に target="_blank" の属性を指定してから展開に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("a").attr("target", "_blank")%
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースし、パース結果から body 部分を取り出して変数 body に入れておきます。
body に対して select("a") を実行し a 要素を探し出します。
取り出した a 要素に対して target="_blank" という属性を指定します。attr("target", "_blank") という指定を行うと、既に target の指定のある要素に対してはそれが書き換えられ、また、target という属性を持っていない要素にはそれが付け加えられます。
最後に html() メソッドで、属性値を書き換えたあとの a 要素を含む body の内側を展開しています。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>Hello World!</p>
<a href="https://www.frameworks.co.jp/" target="_blank">www.frameworks.co.jp</a>
<br>
<a href="https://www.example.com/" target="_blank">www.example.com</a>
<br>
<p>Good byte.</p>
</body>
</html>attr(attributeName) メソッドも参照してください。
この HTMLElements に含まれている HTMLElement の中の先頭の要素を返します。この HTMLElements オブジェクトが空の場合には null が返されます。
先頭の HTMLElement オブジェクトを返します。
last() メソッドも参照してください。
この HTMLElements が保持している HTMLElement のいずれかが attributeName に指定された属性を保持している場合に true を返します。
true または false の真偽値。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<a href="https://www.frameworks.co.jp/">www.frameworks.co.jp</a><br>
<a href="https://www.example.com/" target="_blank">www.example.com</a><br>
....この html に対して target 属性をもった a 要素があるかどうかを調べてみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>%parseHtml(htmlText).select("a").hasAttr("target")%</h1>
</body>
</html>parseHtml() 関数を使って htmlText をパースしてから、その結果に対して select("a") メソッドで a 要素を拾い集めます。集まった a 要素を保持している HTMLElements オブジェクトに対して hasAttr("target") メソッドを呼び出して target 属性を持っている a 要素があるかどうか調べています。
実行結果は下記のようになるでしょう。このケースでは target 属性をもつ a 要素があるので true になります。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>true</h1>
</body>
</html>この HTMLElements が保持している HTMLElement のいずれかが className に指定された class 属性を保持している場合に true を返します。
true または false の真偽値。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<a href="https://www.frameworks.co.jp/" class="localLink link">www.frameworks.co.jp</a><br>
<a href="https://www.example.com/" class="externalLink link">www.example.com</a><br>
....この html に対して class 属性に externalLink を持った a 要素があるかどうかを調べてみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>%parseHtml(htmlText).select("a").hasClass("externalLink")%</h1>
</body>
</html>parseHtml() 関数を使って htmlText をパースしてから、その結果に対して select("a") メソッドで a 要素を拾い集めます。集まった a 要素を保持している HTMLElements オブジェクトに対して hasClass("externalLink") メソッドを呼び出して class 属性に externalLink を持っている a 要素があるかどうか調べています。
実行結果は下記のようになるでしょう。このケースでは class="externalLink" を持つ a 要素があるので true になります。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>true</h1>
</body>
</html>この HTMLElements に含まれている各 HTMLElement オブジェクトの内側の html を連結したものを返します。この HTMLElements が空の場合空文字列が返されます。
文字列を返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<a href="https://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p>How are you?</p>
<span>Good bye.</span>
....この html 中の a 要素と p 要素の内側の HTML を取り出して展開結果に組込んでみましょう。
<!DOCTYPE html>
<html>
<body>
%parseHtml(htmlText).select("a, p").html()%
</body>
</html>parseHtml() 関数で htmlText をパースしてから select("a, p") メソッドを呼び出して a 要素と p 要素を拾い集めます。集めた a と p 要素を保持している HTMLElements オブジェクトに対して html() メソッドを呼び出し、a 要素と p 要素の内側の html を連結した結果を生成して展開結果に組込んでいいます。
この展開例の実行結果は下記のようになるでしょう。内側の html を連結した物なので a タグと p タグは除去されています。
<!DOCTYPE html>
<html>
<head></head>
<body>
Hello
<span style="color:blue;">World!</span> How are you?
</body>
</html>outerHtml() も参照してください。
この HTMLElements に含まれる各 HTMLElement の 内側の html をパラメタで指定された html に書き換えます。
各要素の内側を置き換える html を指定します。この文字列は html として正しい html を渡してください。html でなければならないので & 記号など、エスケープが必要なものは適切にエスケープされている必要があります。
HTMLElements を返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<a href="https://www.example.com">Hello World!</a>
<p>How are you?</p>
<span>Good bye.</span>
....この html 中の a 要素と p 要素の inner HTML を "今日は<em>雨が降る</em>でしょう" に書き換えた上で展開結果に組込んでみましょう。
<!DOCTYPE html>
<html>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("a, p").html("今日は<em>雨が降る</em>でしょう")%
%body.html()%
</body>
</html>parseHtml() 関数で htmlText をパースしてから body() メソッドで body 要素部分を取り出し、変数 body に保持しておきます。
次に、body から select("a, p") を実行して a 要素と p 要素を抽出します。抽出して得られた HTMLElements オブジェクトに対して html("今日は<em>雨が降る</em>でしょう") を実行し a 要素と p 要素の内側の html を "今日は<em>雨が降る</em>でしょう" に書き換えます。
最後に、書き換えた後の body を body.html() で展開に組込んでいます。
この展開例の実行結果は下記のようになるでしょう。a 要素と p 要素の内側の html は書き変わっていますが、 span 要素は書き変わっていません。
<!DOCTYPE html>
<html>
<head></head>
<body>
....
<a href="https://www.example.com">今日は<em>雨が降る</em>でしょう</a>
<p>今日は<em>雨が降る</em>でしょう</p>
<span>Good bye.</span> ....
</body>
</html>この HTMLElements に含まれる要素の中に selector にマッチするものがある場合に true を返します。
調べたい selector を渡します。
true または false の真偽値を返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<a href="https://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p class="cls1">How are you?</p>
<span>Good bye.</span>
....この htmlText に対していくつかのパターンの is(selector) メソッドを実行して結果を確認してみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>%parseHtml(htmlText).select("a, p").is(".cls1")%</h1>
<h1>%parseHtml(htmlText).select("a, p").is("[href]")%</h1>
<h1>%parseHtml(htmlText).select("a, p").is("span")%</h1>
<h1>%parseHtml(htmlText).select("a, p").is("div")%</h1>
</body>
</html>parseHtml() 関数で htmlText をパースしてから select("a p") を実行して a 要素と p 要素を拾い集めます。集めた結果を保持している HTMLElements に対して 4 種類の is(selector) メソッドを適用して結果を確認してみましょう。
この展開例の実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>true</h1>
<h1>true</h1>
<h1>true</h1>
<h1>false</h1>
</body>
</html>is(".cls1") の結果は true になっています。<p class="cls1".... という記述の要素があるためです。
is("[href]") の結果は true になっています。href 属性を持つ a 要素があるためです。
is("span") の結果は true になっています。a 要素の内側の span 要素があるためです。
is("div") の結果は false になっています。div 要素はどこにもないためです。
not(selector) メソッドも参照してください。
この HTMLElements に含まれている HTMLElement の中の最後の要素を返します。この HTMLElements オブジェクトが空の場合には null が返されます。
最後の HTMLElement オブジェクトを返します。
first() メソッドも参照してください。
この HTMLElements オブジェクトから selector にマッチしない要素を抽出します。
抽出した後の HTMLElements オブジェクトを返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<div class="logo">One</div>
<div class="cls2">Two</div>
....この html の中から <div class="cls2">Two</div> だけを取り出して展開結果に組込んでみましょう。
<!DOCTYPE html>
<html>
<body>
%parseHtml(htmlText).select("div").not(".logo").outerHtml()%
</body>
</html>parseHtml() 関数で htmlText をパースした後 select("div") で div 要素を抽出します。この select() 実行後に得られる HTMLElements オブジェクトには二つの div 要素が含まれています。
この二つの div 要素を含んでいる HTMLElements に対して not(".logo") を適用して logo という class 属性を持っている div 要素を除去します。
その後、outerHtml() で結果を展開に組込んでいます。
この展開の実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="cls2">
Two
</div>
</body>
</html>is(selector) メソッドも参照してください。
この HTMLElements に含まれている各 HTMLElement オブジェクトの html を連結したものを返します。この HTMLElements が空の場合空文字列が返されます。
文字列を返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<a href="https://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p>How are you?</p>
<span>Good bye.</span>
....この html 中の a 要素と p 要素の HTML を取り出して展開結果に組込んでみましょう。
<!DOCTYPE html>
<html>
<body>
%parseHtml(htmlText).select("a, p").outerHtml()%
</body>
</html>parseHtml() 関数で htmlText をパースしてから select("a, p") メソッドを呼び出して a 要素と p 要素を拾い集めます。集めた a と p 要素を保持している HTMLElements オブジェクトに対して outerHtml() メソッドを呼び出し、a 要素と p 要素の html を連結した結果を生成して展開結果に組込んでいます。
この展開例の実行結果は下記のようになるでしょう。a 要素と p 要素がそのまま展開結果に組込まれています。
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="https://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p>How are you?</p>
</body>
</html>html() メソッドも参照してください。
この HTMLElements が保持している各要素を文書から削除します。
HTMLElements を返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<body>
<div>
<p>Hello</p>
<p>there</p>
<img />
</body>この htmlText の中から p 要素を削除したものを展開結果に組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>HTMLElements.remove() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("p").remove()%
%body.html()%
</body>
</html>parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。HTMLDocument オブジェクトに対して body() メソッドを実行して body 要素を取り出し、それを変数 body に保持しておきます。
body に対して select("p") を実行し p 要素を集めます。集めた p 要素に対して remove() メソッドを実行し、それらの p 要素を文書から削除します。
最後に body に対して html() メソッドを呼び出して body の内側を展開に埋め込みます。
この展開の実行結果は下記の様になるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.remove() の example</title>
</head>
<body>
<div>
<img>
</div>
</body>
</html>この HTMLElements オブジェクトが保持している各要素から、一括して指定された属性を削除します。
削除したい属性の名前を指定します。
HTMLElements オブジェクト
複数の HTMLElement オブジェクトに対して一括して属性を削除できる点を除いて、HTMLElement オブジェクトの reveAttr() メソッドと同じです。HTMLElement の removeAttr() メソッドの説明も参照してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<p>
....
<a href="https://www.frameworks.com/" target="_blank">www.frameworks.co.jp</a><br>
<a href="https://www.example.com/" target="_blank">www.example.com</a><br>
<a href="https://www.example.com/help.html" target="_top">www.example.com</a><br>
....
</p>このような html から target="_blank" の部分を除去したい場合の展開は下記のようになります。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("a[target=_blank]").removeAttr("target")%
%doc.body().html()%
</body>
</html>parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。
doc に対して select("a[target=_blank]") を実行し target="_blank" という属性指定を持っている a 要素を取り出します。この例では 2 件取り出されます。
select() の結果得られた a 要素 2 件を含む HTMLElements オブジェクトに対して removeAttr("target") を実行し target 属性を削除します。
最後に doc の body に対して html() メソッドを呼び出して body 要素の内側を展開に埋め込みます。
実行結果は下記のようになるでしょう。三つめの a 要素は target="_top" なので select("a[target=_blank]") の選択対象に入らないため removeAttr("target") の影響は受けていません。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>
....
<a href="https://www.frameworks.com/">www.frameworks.co.jp</a><br>
<a href="https://www.example.com/">www.example.com</a><br>
<a href="https://www.example.com/help.html" target="_top">www.example.com</a><br>
....
</p>
</body>
</html>この HTMLElements オブジェクトが保持している各要素から、一括して指定された class 属性を削除します。
削除したい class 属性の名前を指定します。
HTMLElements オブジェクト
複数の HTMLElement オブジェクトに対して一括して class 属性を削除できる点を除いて、HTMLElement オブジェクトの removeClass() メソッドと同じです。HTMLElement の removeClass() メソッドの説明も参照してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<body>
<ul class="menu">
<li class="menuItem listItem">menuItem1</li>
<li class="menuItem listItem">menuItem2</li>
</ul>
</body>この中にある li 要素の class 属性 "menuItem" を削除してから、body 全体を展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").removeClass("menuItem")%
%doc.body().outerHtml()%
</html>parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。
doc に対して select("li") を実行し li 要素を取り出します。この例では 2 件取り出されます。
select() の結果得られた li 要素 2 件を含む HTMLElements オブジェクトに対して removeClass("menuItem") を実行し class 属性を削除します。
最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。
実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul class="menu">
<li class="listItem">menuItem1</li>
<li class="listItem">menuItem2</li>
</ul>
</body>
</html>addClass(className) メソッドも参照してください。
select() はこの HTMLElements が保持している要素に対して selector で指定された css セレクタを満たす要素だけを選択して絞り込んだ結果を返します。
選択条件を指定する css セレクタを与えます。空文字列は与えられません。
条件を満たす要素を含む HTMLelements オブジェクトを返します。
HTMLElements の select() メソッドの動作は、その抽出対象が HTMLElements であることを除いて HTMLElement の select() メソッドと同じです。
使用方法については HTMLElement の select() メソッドを参照してください。
この HTMLElements が保持している HTMLElement の数を返します。
この HTMLElements に含まれている要素の数を返します。値は 0 以上の整数です。
この HTMLElements に含まれるすべての要素の tagName を指定された newTagName に書き換えます。
HTMLElements を返します。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
....
<body>
<p>Hello <em>World!</em></p>
<a href="https://www.frameworks.co.jp">www.frameworks.co.jp</a>
<span class="cls1">こんにちは</span>
</body>
....この html に対して body タグの直下にある p a span の各タグをすべて div に書き換えた結果を展開結果に組込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
%parseHtml(htmlText).body().children().tagName("div").outerHtml()%
</body>
</html>parseHtml() 関数で htmlText をパースしてから body 要素部分を取り出します。取り出した body 要素に対して children() メソッドを実行して body 直下の３つの要素 p a span を取り出します。取り出した３つの要素を保持している HTMLElements オブジェクトに対して tagName("div") を実行し、３つの要素のタグをすべて div に書き換えています。最後に outerHtml() を実行して書き換えた後の要素を展開に組込んでいます。
この展開の実行結果は下記のようになるでしょう。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
Hello
<em>World!</em>
</div>
<div href="https://www.frameworks.co.jp">
www.frameworks.co.jp
</div>
<div class="cls1">
こんにちは
</div>
</body>
</html>この例ではタグ名を強引に div に書き換えていますので div タグに href 属性が付されていたり、cls1 というクラス属性が付されていたりします。実施には、属性も考慮に入れてタグ名の書き換えを行なう必要がある点にご注意ください。
この HTMLElements オブジェクトが保持している要素が className で指定した class 属性を持っていればそれを削除します。持っていなければそれを付加します。
削除または付加したい class 属性の名前を指定します。
HTMLElements オブジェクト
複数の HTMLElement オブジェクトに対して一括して class 属性を設定できる点を除いて、HTMLElement オブジェクトの toggleClass() メソッドと同じです。HTMLElement の toggleClass() メソッドの説明も参照してください。
htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。
<body>
<ul class="menu">
<li class="listItem">menuItem2</li>
<li class="menuItem listItem">menuItem1</li>
</ul>
</body>この中にある li 要素の class 属性に "menuItem" を追加または削除してから、body 全体を展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").toggleClass("menuItem")%
%doc.body().outerHtml()%
</html>parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。
doc に対して select("li") を実行し li 要素を取り出します。この例では 2 件取り出されます。
select() の結果得られた li 要素 2 件を含む HTMLElements オブジェクトに対して toggleClass("menuItem") を実行し class 属性を削除または付加します。
最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。
実行結果は下記のようになるでしょう。一つめの li 要素はもともと class 属性 menuItem が付けられていなかったので toggleClass("menuItem") の実行で menuItem という class 属性が付加されています。反対に、二つめの li 要素はもともと menuItem という class 属性が付けられていたので toggleClass("menuItem") の実行で menuItem という class 属性が削除されています。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul class="menu">
<li class="listItem menuItem">menuItem2</li>
<li class="listItem">menuItem1</li>
</ul>
</body>
</html>