xmlをhtml上に表示するサンプル
<!DOCTYPE html>
<html lang="ja"> <!-- HTMLドキュメントの言語を日本語に設定 -->
<head>
<meta charset="UTF-8"> <!-- ドキュメントの文字エンコーディングを指定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- レスポンシブデザインのためのメタタグ -->
<title>XMLツリービュー - ファイルアップロード</title> <!-- ページのタイトル -->
<style>
/* ツリービューのコンテナスタイル */
#treeContainer {
width: 50%; /* コンテナの幅を50%に設定 */
height: 400px; /* コンテナの高さを400pxに設定 */
overflow-y: auto; /* 縦スクロールを有効化 */
overflow-x: auto; /* 横スクロールを有効化 */
border: 1px solid #ccc; /* コンテナに薄い灰色の枠線を追加 */
padding: 10px; /* 内側の余白を追加 */
margin: 20px auto; /* コンテナを中央寄せし、上下に20pxの外側余白を追加 */
background-color: #f9f9f9; /* 背景色を淡い灰色に設定 */
}
ul {
list-style-type: none; /* リストマーカーを非表示にする */
padding-left: 20px; /* 左側の余白を追加 */
}
.node {
cursor: pointer; /* カーソルをポインタに変更してクリック可能であることを示す */
padding: 5px; /* 内側の余白を追加 */
border-radius: 5px; /* ノードの角を丸める */
}
.node:hover {
background-color: #e6f7ff; /* ホバー時の背景色を薄い青に変更 */
}
.expanded::before {
content: "▼ "; /* 展開されたノードの前に下向き矢印を追加 */
}
.collapsed::before {
content: "▶ "; /* 折りたたまれたノードの前に右向き矢印を追加 */
}
</style>
</head>
<body>
<h1>XMLをツリービューで表示</h1> <!-- ページの見出し -->
<input type="file" id="fileInput" accept=".xml"> <!-- XMLファイルをアップロードするためのファイル入力フィールド -->
<div id="treeContainer"></div> <!-- ツリービューを表示するコンテナ -->
<script>
const fileInput = document.getElementById("fileInput"); // ファイル入力要素を取得
const treeContainer = document.getElementById("treeContainer"); // ツリービューコンテナを取得
// ファイル選択時にXMLを読み込み
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0]; // 選択されたファイルを取得
if (!file) {
return; // ファイルが選択されていない場合は何もしない
}
const reader = new FileReader(); // FileReaderオブジェクトを作成
reader.onload = () => {
const parser = new DOMParser(); // DOMParserオブジェクトを作成
const xml = parser.parseFromString(reader.result, "application/xml"); // ファイルの内容をXMLとしてパース
treeContainer.innerHTML = ""; // コンテナをクリア
renderTree(xml, treeContainer); // ツリービューを描画
};
reader.readAsText(file); // ファイルをテキストとして読み込み
});
// ツリービューを生成
function renderTree(xml, container) {
const createNode = (node) => {
const li = document.createElement("li"); // 新しいリスト要素を作成
const span = document.createElement("span"); // 新しいスパン要素を作成
span.textContent = node.nodeName; // ノード名をスパン要素のテキストとして設定
span.classList.add("node", "collapsed"); // スパン要素にクラスを追加
const childNodes = Array.from(node.childNodes).filter(
(n) => n.nodeType === 1 // 子ノードがElementノードの場合にフィルタリング
);
if (childNodes.length > 0) {
const ul = document.createElement("ul"); // 新しいリスト要素を作成
ul.style.display = "none"; // 初期状態では子ノードを非表示
childNodes.forEach((child) => ul.appendChild(createNode(child))); // 子ノードを再帰的に処理して追加
li.appendChild(span);
li.appendChild(ul);
span.addEventListener("click", () => {
const isCollapsed = ul.style.display === "none"; // 現在の表示状態を確認
ul.style.display = isCollapsed ? "block" : "none"; // 表示/非表示をトグル
span.classList.toggle("collapsed", !isCollapsed); // クラスを切り替え
span.classList.toggle("expanded", isCollapsed); // クラスを切り替え
});
} else {
span.classList.add("leaf"); // リーフノードのクラスを追加
li.appendChild(span);
}
return li; // 作成したリスト要素を返す
};
const ul = document.createElement("ul"); // ルート用のリスト要素を作成
ul.appendChild(createNode(xml.documentElement)); // ルート要素を処理して追加
container.appendChild(ul); // コンテナにリストを追加
}
</script>
</body>
</html>
これをhtmlファイルに保存して、
ブラウザで開いてみると、
こんな感じの画面になります。↓
ローカル環境のhtmlファイルでも試せるんですが、
こちらのサイトでも、動作テストができます。↓
その他のテスト用webツール。↓
無料でwebページを公開することもできます。↓