XSLTProcessor: transformToFragment() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

transformToFragment() は XSLTProcessor インターフェイスのメソッドで、 XSLTProcessor に関連付けられた XSLT スタイルシートを使用して、指定された Node のソースを DocumentFragment に変換します。

構文

js
transformToFragment(source, document)

引数

source

XSLT スタイルシートを適用する Node のソース。

document

この文書フラグメントが関連付けられる文書 (Document)（任意の文書フラグメントを追加することができる文書に関連付けられます）。

返値

DocumentFragment です。

例

transformToFragment() の使用

この例では、XML データを HTML に変換する transformToFragment() の使用方法を示しています。変換後の HTML は、文書フラグメントとして DOM に直接挿入することができます。

HTML

html
<div id="result"></div>

JavaScript

js
const xmlString = `
<books>
  <book>
    <title>Book 1</title>
    <author>Author 1</author>
  </book>
  <book>
    <title>Book 2</title>
    <author>Author 2</author>
  </book>
</books>
`;

const xsltString = `
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <ul>
      <xsl:for-each select="books/book">
        <li>
          <strong><xsl:value-of select="title"/></strong>
          by <em><xsl:value-of select="author"/></em>
        </li>
      </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const xsltDoc = parser.parseFromString(xsltString, "application/xml");

const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsltDoc);

// Perform the transformation, returning the result as a document fragment
const resultFragment = xsltProcessor.transformToFragment(xmlDoc, document);

// Insert the result into the page
document.getElementById("result").appendChild(resultFragment);

結果

仕様書

Specification
DOM
# dom-xsltprocessor-transformtofragment

ブラウザーの互換性

BCD tables only load in the browser

関連情報