XSLTProcessor

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Объект XSLTProcessor применяет преобразование стилей XSLT к XML-документу, чтобы получить новый XML-документ в качестве результата. Он имеет методы для загрузки XSLT-стилей, для управления значениями параметров <xsl:param> и для применения преобразования к документам.

Конструктор

XSLTProcessor(): Создаёт новый XSLTProcessor.

Методы экземпляра

XSLTProcessor.importStylesheet(): Импортирует XSLT-стиль. Если заданный узел является узлом документа, вы можете передать полный XSLT-трансформатор или литеральный трансформирующий узел результата; в противном случае это должен быть узел <xsl:stylesheet> или <xsl:transform>.
XSLTProcessor.transformToFragment(): Преобразует исходный узел, применяя импортированный XSLT-стиль с помощью функции XSLTProcessor.importStylesheet(). Владеющий документ результата фрагмента документа — это владеющий узел.
XSLTProcessor.transformToDocument(): Преобразует исходный узел, применяя XSLT-стиль, импортированный с помощью функции XSLTProcessor.importStylesheet().
XSLTProcessor.setParameter(): Устанавливает значение параметра (<xsl:param>) в импортированном XSLT-стиле.
XSLTProcessor.getParameter(): Получает значение параметра из XSLT-стиля.
XSLTProcessor.removeParameter(): Удаляет параметр, если он был ранее установлен. Это заставит XSLTProcessor использовать значение по умолчанию для параметра, указанное в XSLT-стиле.
XSLTProcessor.clearParameters(): Удаляет все установленные параметры из XSLTProcessor. XSLTProcessor затем будет использовать значения по умолчанию, указанные в XSLT-стиле.
XSLTProcessor.reset(): Удаляет все параметры и стили из XSLTProcessor.

Свойства экземпляра

Для данного интерфейса нет свойств.

Примеры

Создание экземпляра `XSLTProcessor`

async function init() {
  const parser = new DOMParser();
  const xsltProcessor = new XSLTProcessor();

  // Load the XSLT file, example1.xsl
  const xslResponse = await fetch("example1.xsl");
  const xslText = await xslResponse.text();
  const xslStylesheet = parser.parseFromString(xslText, "application/xml");
  xsltProcessor.importStylesheet(xslStylesheet);

  // process the file
  // ...
}

Создание XML-документа на основе части DOM документа

Для фактического преобразования XSLTProcessor требуется XML-документ, который используется совместно с импортированным XSL-файлом для получения окончательного результата. XML-документ может быть отдельным XML-файлом, загруженным с помощью fetch(), или он может быть частью существующей страницы.

Для обработки части DOM страницы необходимо сначала создать XML-документ в памяти. Предполагая, что DOM для обработки содержится в элементе с id example, этот DOM может быть «скопирован» с помощью метода Document.importNode() XML-документа в памяти. Document.importNode() позволяет передавать фрагмент DOM между документами, в данном случае из HTML-документа в XML-документ. Первый параметр ссылается на узел DOM для копирования. Установив второй параметр в «true», вы скопируете и все дочерние узлы (глубокое копирование). Скопированный DOM затем можно вставить в XML-документ с помощью Node.appendChild(), как показано ниже.

// Create a new XML document in memory
const xmlRef = document.implementation.createDocument("", "", null);

// We want to move a part of the DOM from an HTML document to an XML document.
// importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
const myNode = document.getElementById("example");
const clonedNode = xmlRef.importNode(myNode, true);

// Add the cloned DOM into the XML document
xmlRef.appendChild(clonedNode);

После импорта стиля XSLTProcessor должен выполнить два метода для фактического преобразования, а именно XSLTProcessor.transformToDocument() и XSLTProcessor.transformToFragment(). XSLTProcessor.transformToDocument() возвращает полный XML-документ, в то время как XSLTProcessor.transformToFragment() возвращает фрагмент документа, который можно легко добавить к существующему документу. Оба принимают XML-документ в качестве первого параметра, который будет преобразован. XSLTProcessor.transformToFragment() требует второго параметра, а именно объекта документа, который будет владельцем сгенерированного фрагмента. Если сгенерированный фрагмент будет вставлен в текущий HTML-документ, достаточно передать document.

Создание XML-документа из строки 'XML Soup'

Вы можете использовать DOMParser для создания XML-документа из строки XML.

const parser = new DOMParser();
const doc = parser.parseFromString(aStr, "text/xml");

Выполнение преобразования

const fragment = xsltProcessor.transformToFragment(xmlRef, document);

Базовый пример

Базовый пример загрузит XML-файл и применит к нему XSL-преобразование. Это те же файлы, что и в примере Генерация HTML. XML-файл описывает статью, а XSL-файл форматирует информацию для отображения.

XML

<?xml version="1.0"?>
<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
  <myNS:Title>My Article</myNS:Title>
  <myNS:Authors>
    <myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
    <myNS:Author>Mr. Bar</myNS:Author>
  </myNS:Authors>
  <myNS:Body>
    The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
  </myNS:Body>
</myNS:Article>

XSLT

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
                   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                   xmlns:myNS="http://devedge.netscape.com/2002/de">

  <xsl:output method="html" />

  <xsl:template match="/">
    <html>

      <head>

        <title>
          <xsl:value-of select="/myNS:Article/myNS:Title"/>
        </title>

        <style>
          .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
        </style>

      </head>

      <body>
        <p class="myBox">
          <span class="title">
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </span> <br />

          Authors:   <br />
            <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
          </p>

        <p class="myBox">
          <xsl:apply-templates select="//myNS:Body"/>
        </p>

      </body>

    </html>
  </xsl:template>

  <xsl:template match="myNS:Author">
     --   <xsl:value-of select="." />

    <xsl:if test="@company">
     ::   <b>  <xsl:value-of select="@company" />  </b>
    </xsl:if>

    <br />
  </xsl:template>

  <xsl:template match="myNS:Body">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="@*|node()">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

Пример загружает как .xsl (xslStylesheet), так и .xml (xmlDoc) файлы в память. Затем .xsl-файл импортируется (xsltProcessor.importStylesheet(xslStylesheet)), и выполняется преобразование (xsltProcessor.transformToFragment(xmlDoc, document)). Это позволяет получать данные после загрузки страницы без запуска новой загрузки страницы.

JavaScript

async function init() {
  const parser = new DOMParser();
  const xsltProcessor = new XSLTProcessor();

  // Load the XSLT file, example1.xsl
  const xslResponse = await fetch("example1.xsl");
  const xslText = await xslResponse.text();
  const xslStylesheet = parser.parseFromString(xslText, "application/xml");
  xsltProcessor.importStylesheet(xslStylesheet);

  // Load the XML file, example1.xml
  const xmlResponse = await fetch("example1.xml");
  const xmlText = await xmlResponse.text();
  const xmlDoc = parser.parseFromString(xmlText, "application/xml");

  const fragment = xsltProcessor.transformToFragment(xmlDoc, document);

  document.getElementById("example").textContent = "";
  document.getElementById("example").appendChild(fragment);
}

init();

Расширенный пример

Этот расширенный пример сортирует несколько div в зависимости от их содержимого. Пример позволяет сортировать содержимое несколько раз, чередуя порядок сортировки по возрастанию и убыванию. JavaScript загружает .xsl-файл только при первой сортировке и устанавливает переменную xslLoaded в значение true после завершения загрузки файла. Используя метод XSLTProcessor.getParameter(), код может определить, сортировать по возрастанию или убыванию. По умолчанию используется возрастание, если параметр пустой (в первый раз, когда происходит сортировка, так как в XSLT-файле нет значения для него). Значение сортировки устанавливается с помощью XSLTProcessor.setParameter().

XSLT-файл содержит параметр myOrder, который JavaScript устанавливает для изменения метода сортировки. Атрибут order элемента xsl:sort может получить значение параметра, используя $myOrder. Однако значение должно быть XPath-выражением, а не строкой, поэтому используется {$myOrder}. Использование {} оценивает содержимое как XPath-выражение.

После завершения преобразования результат добавляется в документ, как показано в этом примере.

XHTML

<div id="example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

JavaScript

let xslRef;
let xslLoaded = false;
const parser = new DOMParser();
const xsltProcessor = new XSLTProcessor();
let myDOM;

let xmlRef = document.implementation.createDocument("", "", null);

async function sort() {
  if (!xslLoaded) {
    const response = await fetch("example2.xsl");
    const xslText = await response.text();
    xslRef = parser.parseFromString(xslText, "application/xml");
    xsltProcessor.importStylesheet(xslRef);
    xslLoaded = true;
  }

  // Create a new XML document in memory
  xmlRef = document.implementation.createDocument("", "", null);

  // We want to move a part of the DOM from an HTML document to an XML document.
  // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
  const myNode = document.getElementById("example");
  const clonedNode = xmlRef.importNode(myNode, true);

  // After cloning, we append
  xmlRef.appendChild(clonedNode);

  // Set the sorting parameter in the XSL file
  const sortVal = xsltProcessor.getParameter(null, "myOrder");

  if (sortVal === "" || sortVal === "descending") {
    xsltProcessor.setParameter(null, "myOrder", "ascending");
  } else {
    xsltProcessor.setParameter(null, "myOrder", "descending");
  }

  // Initiate the transformation
  const fragment = xsltProcessor.transformToFragment(xmlRef, document);

  // Clear the contents
  document.getElementById("example").textContent = "";

  myDOM = fragment;

  // Add the new content from the transformation
  document.getElementById("example").appendChild(fragment);
}

XSLT

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" />

  <xsl:param name="myOrder" />

  <xsl:template match="/">

    <xsl:apply-templates select="/div//div">
      <xsl:sort select="." data-type="number" order="{$myOrder}" />
    </xsl:apply-templates>
  </xsl:template>

  <xsl:template match="div">
    <xsl:copy-of select="." />
  </xsl:template>
</xsl:stylesheet>

Спецификации

Спецификация
DOM # interface-xsltprocessor

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`XSLTProcessor`	1	12	1	≤12.1	3.1	18	4	≤12.1	2	1.0	3
`XSLTProcessor`	1	12	1	≤12.1	3.1	18	4	≤12.1	2	1.0	3
`clearParameters`	1	12	1	≤12.1	3.1	18	4	≤12.1	2	1.0	3
`getParameter`	1 Chrome поддерживает только строковые значения.	12 Edge поддерживает только строковые значения.	1	≤12.1 Opera поддерживает только строковые значения.	3.1 Safari поддерживает только строковые значения.	18 Chrome Android поддерживает только строковые значения.	4	≤12.1 Opera поддерживает только строковые значения.	2 Safari на iOS поддерживает только строковые значения.	1.0 Samsung Internet поддерживает только строковые значения.	3 WebView поддерживает только строковые значения.
`importStylesheet`	1	12	1	≤12.1	3.1	18	4	≤12.1	2	1.0	3
`removeParameter`	1	12	1	≤12.1	3.1	18	4	≤12.1	2	1.0	3
`reset`	1	12	1	≤12.1	3.1	18	4	≤12.1	2	1.0	3
`setParameter`	1 Chrome поддерживает только строковые значения.	12 Edge поддерживает только строковые значения.	1	≤12.1 Opera поддерживает только строковые значения.	3.1 Safari поддерживает только строковые значения.	18 Chrome Android поддерживает только строковые значения.	4	≤12.1 Opera поддерживает только строковые значения.	2 Safari на iOS поддерживает только строковые значения.	1.0 Samsung Internet поддерживает только строковые значения.	3 WebView поддерживает только строковые значения.
`transformToDocument`	1 Chrome возвращает `null` при ошибке.	12 Edge возвращает `null` при ошибке.	1 Firefox выбрасывает исключение при ошибке.	≤12.1 ["Opera 12.1 и ранее выбрасывают исключение при ошибке.", "Opera 15 и новее возвращают `null` при ошибке."]	3.1 Safari возвращает `null` при ошибке.	18 Chrome Android возвращает `null` при ошибке.	4 Firefox для Android выбрасывает исключение при ошибке.	≤12.1 ["Opera Android 12.1 и ранее выбрасывают исключение при ошибке.", "Opera Android 14 и новее возвращают `null` при ошибке."]	2 Safari на iOS возвращает `null` при ошибке.	1.0 Samsung Internet возвращает `null` при ошибке.	3 WebView возвращает `null` при ошибке.
`transformToFragment`	1 Chrome возвращает `null` при ошибке.	12 Edge возвращает `null` при ошибке.	1 Firefox выбрасывает исключение при ошибке.	≤12.1 ["Opera 12.1 и ранее выбрасывают исключение при ошибке.", "Opera 15 и новее возвращают `null` при ошибке."]	3.1 Safari возвращает `null` при ошибке.	18 Chrome Android возвращает `null` при ошибке.	4 Firefox для Android выбрасывает исключение при ошибке.	≤12.1 ["Opera Android 12.1 и ранее выбрасывают исключение при ошибке.", "Opera Android 14 и новее возвращают `null` при ошибке."]	2 Safari на iOS возвращает `null` при ошибке.	1.0 Samsung Internet возвращает `null` при ошибке.	3 WebView возвращает `null` при ошибке.

См. также

XSLT
Какой язык программирования XSLT? на сайте IBM developer
Учебник по XSLT на сайте zvon.org
Учебник по XPath на сайте zvon.org

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XSLTProcessor

Конструктор

Методы экземпляра

Свойства экземпляра

Примеры

Создание экземпляра XSLTProcessor

Создание XML-документа на основе части DOM документа

Создание XML-документа из строки 'XML Soup'

Выполнение преобразования

Базовый пример

XML

XSLT

JavaScript

Расширенный пример

XHTML

JavaScript

XSLT

Спецификации

Совместимость браузеров

См. также

Создание экземпляра `XSLTProcessor`