XMLからHTMLへ-フロントエンドQ&A-php.cn

XMLからHTMLへ

王林

リリース： 2023-05-21 18:47:08

オリジナル

1738 人が閲覧しました

XML から HTML

XML (eXtensible Markup Language) と HTML (Hyper Text Markup Language) は、Web アプリケーション開発で重要な役割を果たす 2 つの一般的なマークアップ言語です。 XML はデータの保存と送信に使用される言語であり、HTML はデータの表示に使用されます。

場合によっては、XML ファイルを HTML 形式に変換すると、読みやすく理解しやすくなることがあります。この記事では、XML から HTML への変換を実現するためのいくつかの方法について説明します。

XSLT (eXtensible Stylesheet Language Transformations) の使用

XSLT は、XML を別の XML または HTML に変換するために使用される言語です。 XML ファイルと XSLT テンプレートを読み取って HTML 出力を生成します。

次に、XML ファイルを HTML 形式に変換する簡単な XSLT の例を示します。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>XML to HTML Conversion</title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="p">
<p style="color:red">
<xsl:value-of select="."/>
</p>
</xsl:template>
</xsl:stylesheet>

ログイン後にコピー

上の例では、XSLT テンプレートは最初に出力 HTML の形式を定義します。次に、XML ノードを HTML タグに変換する方法を定義します。この例では、一致した p 要素が赤いテキストの p タグに変換されます。

JavaScript と DOM (ドキュメントオブジェクトモデル) の使用

JavaScript は Web 開発に使用されるスクリプト言語であり、DOM は HTML および XML ドキュメントを表すインターフェイスです。これら 2 つの技術を組み合わせることで、XML ファイルを HTML に変換できます。

次に、XML ファイルを HTML 形式に変換する簡単な JavaScript と DOM の例を示します。

// 从服务器获取XML文件
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "example.xml", false);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;

// 创建HTML文档
var htmlDoc = document.createElement("html");
var head = document.createElement("head");
var title = document.createElement("title");
title.innerText = "XML to HTML Conversion";
head.appendChild(title);
htmlDoc.appendChild(head);
var body = document.createElement("body");
htmlDoc.appendChild(body);

// 将XML节点转换为HTML标签
var pNodes = xmlDoc.getElementsByTagName("p");
for (var i = 0; i < pNodes.length; i++) {
  var p = document.createElement("p");
  p.style.color = "red";
  p.innerText = pNodes[i].innerText;
  body.appendChild(p);
}

// 在HTML页面上显示结果
document.body.innerHTML = htmlDoc.outerHTML;

ログイン後にコピー

上の例では、まず XMLHttpRequest オブジェクトを使用して XML ファイルを取得します。次に、HTML ドキュメントを作成し、DOM を使用して XML ノードを HTML タグに変換します。最後に、生成された HTML ページがブラウザに表示されます。

サードパーティツールの使用

XSLT または JavaScript コードを手動で記述するだけでなく、サードパーティツールを使用して XML ファイルを HTML 形式に変換することもできます。以下にいくつかの一般的なツールを示します。