XMLによるツリー構造とDOMドキュメントオブジェクトモデルのサンプルコード（写真）-XML/RSS チュートリアル-php.cn

XMLによるツリー構造とDOMドキュメントオブジェクトモデルのサンプルコード（写真）

黄舟

リリース： 2017-03-10 19:26:21

オリジナル

2097 人が閲覧しました

この記事では、主に XML のツリー構造と DOM ドキュメントオブジェクトモデルを紹介します。この記事では、JavaScript による DOM オブジェクトの解析の例を示します。

ツリー構造
XML ドキュメントは常に説明的です。 XML ツリーとも呼ばれるツリー構造は、XML ドキュメントを記述する際に重要な役割を果たします。

このツリー構造には、ルート（親）要素、子要素などが含まれます。ツリー構造を使用すると、ルート要素から派生する後続のすべての分岐とサブ分岐を理解できます。解析はルート要素から始まり、要素を指す最初のブランチまで進み、そこから最初のブランチとその子が処理されます。

例
以下の例は、単純な XML ツリー構造を示しています:

<?xml version="1.0"?>  
<Company>  
    <Employee>  
        <FirstName>Tanmay</FirstName>  
        <LastName>Patil</LastName>  
        <ContactNo>1234567890</ContactNo>  
        <Email>tanmaypatil@xyz.com</Email>  
        <Address>  
            <City>Bangalore</City>  
            <State>Karnataka</State>  
            <Zip>560212</Zip>  
        </Address>  
    </Employee>  
</Company>

ログイン後にコピー

以下のツリー構造は、上記の XML ドキュメントを表しています:
XMLによるツリー構造とDOMドキュメントオブジェクトモデルのサンプルコード（写真）

図には、というルート要素があります。内部には別の要素があります。従業員要素内には、さらに 5 つのブランチ、つまり、、、、および

があります。

要素内には、、、およびという 3 つのサブブランチがあります。

DOM ドキュメントオブジェクトモデル
ドキュメントオブジェクトモデル (DOM) は XML の基礎です。 XML ドキュメントにはノードと呼ばれる階層的な情報単位があり、DOM はこれらのノードとノード間の関係を記述する方法です。

DOM ドキュメントは、階層構造で編成された情報のノードまたはブロックのコレクションです。この階層により、開発者はこのノードツリーをナビゲートして特定の情報をクエリできるようになります。 DOM は情報階層に基づいているため、ノードツリーベースともみなされます。

その一方で、XML DOM は、開発者がアプリケーションを作成するためにノードツリー内の任意の場所にノードを追加、編集、移動、または削除できる API も提供します。

例
次の例 (sample.htm) は、XML ドキュメント (「address.xml」) を XML DOM オブジェクトに解析し、JavaScript を使用して情報を抽出します。

<!DOCTYPE html>  
<html>  
<body>  
<h1>TutorialsPoint DOM example </h1>  
<div>  
<b>Name:</b> <span id="name"></span><br>  
<b>Company:</b> <span id="company"></span><br>  
<b>Phone:</b> <span id="phone"></span>  
</div>  
<script>  
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari   
    xmlhttp = new XMLHttpRequest();   
} else {// code for IE6, IE5   
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   
}   
  
xmlhttp.open("GET","/xml/address.xml",false);   
xmlhttp.send();   
xmlDoc=xmlhttp.responseXML;   
document.getElementById("name").innerHTML=   
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;   
document.getElementById("company").innerHTML=   
xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;   
document.getElementById("phone").innerHTML=   
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;   
</script>  
</body  
</html>

ログイン後にコピー

address.xml の内容は次のとおりです。

<?xml version="1.0"?>  
<contact-info>  
    <name>Tanmay Patil</name>  
    <company>TutorialsPoint</company>  
    <phone>(011) 123-4567</phone>  
</contact-info>

ログイン後にコピー

これら 2 つのファイル、sample.htm と address.xml を同じディレクトリ/xml に保存し、ブラウザで開き、sample.htm ファイルを実行できます。次のような結果が生成されるはずです:
XMLによるツリー構造とDOMドキュメントオブジェクトモデルのサンプルコード（写真）