0

XMLノードの値を取得して特定のHTML要素にプロット（出力）する方法について、誰かに教えてもらえますか、または完全な（しかし単純な）例を提供できますか？

私はこれを調べるのに何時間も費やしましたが、何もうまくいかないか、例が不完全です。

また、「。each」メソッドやループの使用を要求も望まないことにも注意してください。1つのノード値を1つだけ取得して、それを1つのhtml要素に入れたいだけですが、両方のファイル（xmlとjavascript）にあるものの例と、xmlドキュメントを開く方法が必要です。xmlドキュメントを開く例を見たことがありますが、それらは互いに異なるため、どちらが実際に機能するかを知る方法はありません。

私もこれについていくつかのテストを行いましたが、何もプロットすることができないようです。

4

2 に答える 2

1

さて、Ajax呼び出しを使用してファイルを読み取ることができ、成功のコールバックでファイルから受信したデータを操作できます...

xml が次のようなものであると仮定します。

<nodeYouWant simpleAttr="JustAnExample">Text inside Node</nodeYouWant>

XML ノードを取得するには、次を使用できます。

$.ajax({
    type: "GET",
    url: "pathToXML.xml",
    dataType: "xml",
    success: function(data){

        //this gets a node
        var node = data.getElementsByTagName("nodeYouWant");

        //this gets an attribute from the node you just got
        var attr = node.getAttribute("simpleAttr");


       //To put that attr on a html block:
       $(selector).html(attr);

      //or if you want the text content of the node do:
      var nodeText = $(node).text();
      $(selector).html(nodeText);

    }
});

$(selector) テキストを配置する html ブロッ​​クを定義する jQuery の方法です...

例：

<div id="myID" class="myClass"></div>

セレクターは $(".myClass") または $("#myID") にすることができます

詳細については、セレクターを参照してください。

これが助けになることを願っています。

于 2012-08-23T19:14:55.193 に答える
0

あなたが理解する必要がある主なことは、DOM がどのように機能するかです。DOM の仕組みがわからない場合は、ここで情報を見つけることができます

本質的に、親タグと子タグを扱っています。XML では、その情報を抽出する必要があり、そこから好きなことを行うことができます。

ここの左側のバーに行くと、XML DOM ノードの操作方法に関する例とチュートリアルがたくさんあります。

ただし、知っておくべきことがいくつかあります（私の教授がこれを教えてくれたので、役立つヒントです）

  1. ID やクラスは使用できません。代わりに、XMLノードを取得する必要があります

    var elements = node.getElementsByTagName("tagname");

  2. ノード内のテキストを取得するために innerHTML を使用することはできません。HTML ではできますが、XML ではできません。そのためには、使用する必要があります

    var text = node.firstChild.nodeValue;

  3. .attributeNameを使用して属性を取得することはできません。使用する必要があります

    var attrValue = node.getAttribute("attrName");

お役に立てれば。それでも難しい場合は、質問してください。

さて、私は w3schools の例を試してみましたが、これがお役に立てば幸いです。尋ねるだけではない場合：

この例に移動

この例のウォークスルーを試みますが、何が起こっているかについての一般的な考えを理解しているはずです。cd_catalog.xml という名前の XML ファイルがあり、必要なすべての情報が含まれています。ボタンを押すと、すべての情報が HTML 形式で表示されます。前後の HTML コードを見るとmyDiv、xml ファイル内のすべてのアーティストが取り込まれていることがわかります。

それでは、コードを見てみましょう。

function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}

指摘すべきいくつかの重要なこと。ドキュメントが完全に読み込まれ、コードが送信されると (これは によってチェックされますxmlhttp.status==200)、彼は cd_catalog.xml からすべての xml データをxmlDoc取得し、xmlhttp.responseXML

これxmlDocで、cd_catalog.xml からのすべての情報が便​​利な変数に格納されました。そこからxmlDoc.getElementsByTagName("ARTIST");、xml ファイル内のすべてのアーティストの配列を取得するために使用し、他には何も取得しません。彼はこの配列を x と名付けました。

ここで、彼は x として知られるこの巨大な配列を調べ、各インデックスi(x[i] として表される) に対して、1 つだけのもの (テキスト) を含む配列を返すchildNodeschildNodes[0]を取得します。それの.nodeValue。今、彼は元々 xml ファイルに保存されていたテキストを と呼ばれる変数に持っており、タグとその他の必要な HTML をtxt追加するだけで、</br>それを介しdocument.getElementById("myDiv").innerHTMLて HTML 形式に変換されます。このプロセスは、xml ファイル内の ARTIST タグごとに繰り返されます。

これが役立つことを願っています。まだ混乱している場合は、お知らせください。そして、これには、処理している xml ファイルとその場所を知る必要があります。

于 2012-08-23T19:17:51.550 に答える