Flamingo.XPath.get()¶

get() 関数はXPathによって特定されるノードを取得します。

構文¶

Flamingo.XPath.get(xPath, parent)

パラメータ¶

パラメータ名	型	説明
xPath	String	XPath式。
parent	Node オブジェクト	XPath式の評価の実行対象となるコンテキストノード。

戻り値¶

型	説明
Array	XPathによって特定された HTMLElement オブジェクトの配列。

例 1¶

下記の例はすべてのli要素の値を表示する方法を示しています。

変換元デスクトップサイトのHTMLソースコード

<html>
 <body>
   <ul>
     <li>List item 1</li>
     <li>List item 2</li>
   </ul>
 </body>
</html>

次のコードによって変換元サイトのすべてのli要素の値を表示できます。

<!--{foreach Flamingo.XPath.get('//li') as item }-->
 Value is: <!--{= Flamingo.XPath.value('.', item) }--><br/>
<!--{/foreach}-->

モバイルサイトで表示される結果は次のようになります。

Value is: List item 1
Value is: List item 2

例 2¶

下記の例はli要素内で使用されているURLを表示する方法を示しています。

変換元デスクトップサイトのHTMLソースコード

<html>
 <body>
   <ul>
     <li><a href="http://www.site1.com">List item 1</a></li>
     <li><a href="http://www.site2.com">List item 2</a></li>
   </ul>
 </body>
</html>

次のコードによって変換元サイトのli要素内で使用されているすべてのURLを表示できます。

<!--{foreach Flamingo.XPath.get('//li/a') as item }-->
 URL is: <!--{= Flamingo.XPath.value('@href', item) }--><br/>
<!--{/foreach}-->

モバイルサイトで表示される結果は次のようになります。

URL is: http://www.site1.com

URL is: http://www.site2.com

例 3¶

リストにCSSのクラスを追加する方法の例です。

変換元デスクトップサイトのHTMLソースコード

<html>
 <body>
   <ul>
     <li><a href="http://www.site1.com">List item 1</a></li>
     <li><a href="http://www.site2.com">List item 2</a></li>
   </ul>
 </body>
</html>

リストにcustom-classと呼ばれるクラスを適用するためにテンプレートに以下のコードを追加します。

<!--{
var list = X.get('//ul');
list[0] && list[0].classList.add('custom-class');
}-->
<!--{= list[0].outerHTML}-->

表示される結果は次のようになります。

<html>
 <body>
   <ul class="custom-class">
     <li><a href="http://www.site1.com">List item 1</a></li>
     <li><a href="http://www.site2.com">List item 2</a></li>
   </ul>
 </body>
</html>

例 4¶

リストにtarget=”_blank”属性の追加方法の例です。

変換元デスクトップサイトのHTMLソースコード

<html>
 <body>
   <ul>
     <li><a href="http://www.site1.com">List item 1</a></li>
     <li><a href="http://www.site2.com">List item 2</a></li>
   </ul>
 </body>
</html>

target=”_blank”属性を加えるためには、次のコードを使用します。

<!--{
var links = X.get('//a');
for (var i = 0; i < links.length; i++) {
  links[i].setAttribute('target', '_blank');
}
}-->

<!--{foreach links as link}-->
  <!--{= link.outerHTML}-->
<!--{/foreach}-->

表示される結果は次のようになります。

<html>
 <body>
   <ul>
     <li><a href="http://www.site1.com" target="_blank">List item 1</a></li>
     <li><a href="http://www.site2.com" target="_blank">List item 2</a></li>
   </ul>
 </body>
</html>

参考

Flamingo.XPath