JavaScript を使用して XML を分析および表示する方法

今日は、JavaScriptでXMLを操作する方法を学びます。XMLが何か理解できないもののように聞こえる場合でも、心配しないでください！すべてを非常に詳細に分析し、すべてが可能な限り明確になるようにより多くの例を追加します。

XML（HTMLと並ぶ）はデータを保存するための形式の1つであり、HTMLのように見えます。JavaScriptを使用してそれらを分析および表示する方法を理解しましょう。

XMLとは何ですか？

XML（eXtensible Markup Language）は、データを保存および送信するためのテキスト形式です。次のようになります。

<люди>
  <человек>
    <имя>Иван</имя>
    <возраст>25</возраст>
  </человек>
  <человек>
    <имя>Мария</имя>
    <возраст>30</возраст>
  </человек>
</люди>

ここでは、「人々」というものがあり、その中に「名前」と「年齢」を持つ複数の「人」が含まれています。これは、テキスト形式のテーブルのようなものです。

それでは、JavaScriptを使用してこのようなXMLを解析する方法を学びましょう。

JavaScriptを使用してXMLを分析する方法は？

XML を操作するのに役立つ手順がいくつかあります。

1. XMLデータを取得する：データはサーバーから取得することも、JavaScriptの文字列として保存することもできます。

2. それらをオブジェクトに変換する：XMLを操作するには、JavaScriptが操作できるオブジェクトに変換する必要があります。

3. データを抽出する: これにより、特定の値を抽出できます。

最も簡単な例から始めましょう。

例 1: 単純な XML 文字列のパース

XMLの文字列があると仮定します。

const xmlString = `
  <person>
    <person>
      <name>Ivan</name>
      <age>25</age>
    </person>
    <person>
      <name>Maria</name>
      <age>30</age>
    </person>
  </people>`;

次に、それをオブジェクトに変換する必要があります。JavaScriptには、このための組み込みオブジェクトがあります DOMParser.

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

今すぐ xmlDoc — これは、作業できるオブジェクトです。

XML からのデータの抽出

データを抽出するには、XMLノードをHTML要素として参照する必要があります。メソッドを使用します getElementsByTagName():

const people = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Name: ${name}, Age: ${age}`);
}

ここでは、各「人」を通過し、「名前」と「年齢」を取得します。結果として、コンソールに次のように表示されます。

Имя: Иван, Возраст: 25
Имя: Мария, Возраст: 30

例2：HTMLドキュメントからのXMLの解析

XMLはWebページの一部であることがあり、そこから直接解析する必要があります。HTMLに次のような要素があるとします。

<div id="xml">
  <люди>
    <человек>
      <имя>Сергей</имя>
      <возраст>28</возраст>
    </человек>
    <человек>
      <имя>Ольга</имя>
      <возраст>34</возраст>
    </человек>
  </люди>
</div>

このXMLを取得して分析するには、次のことができます。

const xmlStringFromHtml = document.getElementById("xml").innerHTML;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStringFromHtml, "text/xml");

const люди = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Name: ${name}, Age: ${age}`);
}

ここでは、まずHTMLコンテンツを取得し、それをXMLとして使用します。

例3：エラー処理

XMLが正しくない場合があり、それを処理できる必要があります。たとえば、タグが閉じられていない場合、エラーが発生する可能性があります。処理するには、次のチェックを追加できます。

const invalidXmlString = `<person> <name>Ivan</name> <age>25</age></person>`; // エラー: <人々>が閉じられていません

try {
  const xmlDoc = parser.parseFromString(invalidXmlString, "text/xml");
  const ошибка = xmlDoc.getElementsByTagName("parsererror");
  if (ошибка.length > 0) {
    console.error("XML error:", ошибка[0].textContent);
  } else {
    console.log("XML is correct");
  }
} catch (e) {
  console.error("Error parsing XML:", e);
}

結果

以上です。学んだことは次のとおりです。

1. JavaScriptでXML文字列を解析する。

2. HTMLの操作と同様の方法でXMLからデータを抽出します。

3. XMLのエラーを処理します。

XMLはかなり古いものですが、依然として便利なデータ交換フォーマットです。これで、JavaScriptを使用してXMLを操作する方法がわかりました！ 🎉

質問が残っている場合や、より多くの例が必要な場合は、お気軽にご連絡ください。喜んでお手伝いします！ 😊