DOM 抽象化

XML、SVG、あと XHTML なんかは、それぞれ異なるデータ形式やマークアップ言語だが、 これらすべてのデータ構造は、DOM（Document Object Model）という共通の概念で扱うことができる。 DOM は、データの構造や内容に関係なく、一貫したインターフェイスを提供するプログラムと文書のための 標準モデルであり、これを使うことで開発者は異なるデータ形式に対して同じ方法でアクセスし、 操作することが可能になる。

次の XML に対して、JavaScript と Java で同じ DOM操作を行うコードを考えてみる。

<?xml version="1.0" encoding="UTF-8"?>
<fruits>
  <fruit id="1">
    <name>Apple</name>
    <color>Red</color>
  </fruit>
  <fruit id="2">
    <name>Banana</name>
    <color>Yellow</color>
  </fruit>
</fruits>

以下は JavaScript で xml を制御するコードである

// DOMParserを使用して、XML文字列をDOMオブジェクトに変換
const xmlString = `<上記のXMLデータ>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

// 最初のフルーツ要素を取得
const firstFruit = xmlDoc.getElementsByTagName("fruit")[0];

// フルーツの名前を取得
const firstName = firstFruit.getElementsByTagName("name")[0].textContent;
console.log("First fruit name: " + firstName);

// 新しいフルーツ要素を作成し、fruits要素に追加
const newFruit = xmlDoc.createElement("fruit");
newFruit.setAttribute("id", "3");
const newName = xmlDoc.createElement("name");
newName.textContent = "Orange";
const newColor = xmlDoc.createElement("color");
newColor.textContent = "Orange";
newFruit.appendChild(newName);
newFruit.appendChild(newColor);
xmlDoc.getElementsByTagName("fruits")[0].appendChild(newFruit);

以下は Java で xml を制御するコードである

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

public class Main {
  public static void main(String[] args) {
    try {
      // XML文字列をDOMオブジェクトに変換
      String xmlString = "<上記のXMLデータ>";
      DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
      DocumentBuilder builder = factory.newDocumentBuilder();
      Document xmlDoc = builder.parse(new ByteArrayInputStream(xmlString.getBytes("UTF-8")));

      // 最初のフルーツ要素を取得
      NodeList fruitNodes = xmlDoc.getElementsByTagName("fruit");
      Node firstFruit = fruitNodes.item(0);

      // フルーツの名前を取得
      NodeList firstNameList = ((Element) firstFruit).getElementsByTagName("name");
      String firstName = firstNameList.item(0).getTextContent();
      System.out.println("First fruit name: " + firstName);

      // 新しいフルーツ要素を作成し、fruits要素に追加
      Element newFruit = xmlDoc.createElement("fruit");
      newFruit.setAttribute("id", "3");
      Element newName = xmlDoc.createElement("name");
      newName.setTextContent("Orange");
      Element newColor = xmlDoc.createElement("color");
      newColor.setTextContent("Orange");
      newFruit.appendChild(newName);
      newFruit.appendChild(newColor);
      xmlDoc.getElementsByTagName("fruits").item(0).appendChild(newFruit);

    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

これらのコードは、XMLデータから最初のフルーツ要素を取得し、その名前を表示し、 新しいフルーツ要素を作成して追加する機能を実装している。 両方のコードからJavaScriptとJavaの両方でXMLデータを扱い、DOM操作を行う方法を確認できるだろう。

JavaScriptとJavaでの主な違いは、オブジェクト生成とメソッド呼び出しの方法であり、 JavaScriptでは、DOMParser と createElement を使用して新しいオブジェクトを作成し、 Javaでは DocumentBuilderFactory と DocumentBuilder を使用する。 また、要素の取得や操作に関しても、それぞれ言語に応じたメソッドが提供されている。

この例からも、DOM操作に関しては異なる言語であっても同様のアプローチを取れることが理解できるだろう。

もちろん、今の時代に DOM を意識して操作することが適切なのか？という根本的な話はあるが、 これを理解した上で、それぞれのデータ形式や利用する開発言語、実行環境に合わせた方法を選択すべきだろう。