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

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

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

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

Рисунок 7: Сортировка по содержимому div: пример отображения

Фрагмент 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>

Фрагмент JS:

let xslRef;
let xslloaded = false;
const xsltProcessor = new XSLTProcessor();
let myDOM;

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

function sort() {
  if (!xslloaded) {
    const p = new XMLHttpRequest();
    p.open("GET", "example2.xsl", false);
    p.send(null);

    xslRef = p.responseXML;
    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)
}

Таблица стилей XSL:

<?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>

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