如何获取XML值，然后使用javascript将它们输出到htm文件中？

Can anyone tell me or provide a full (but simple) example on how to get the value of an XML node and plot (output) it into a specific HTML element.

任何人都可以告诉我或提供一个完整的（但简单的）示例，说明如何获取XML节点的值并将其绘制（输出）到特定的HTML元素中。

I have spent hours trying to look this up, but nothing works for me or examples are incomplete.

我花了好几个小时试图查看，但没有什么对我有用或示例不完整。

Also, note that I neither require nor desire use of the ".each" method or any loops. I just want to singularly grab one node value and put it into one html element, however I would love to have an example of what is in both files (xml and javascript), as well as how to open the xml document. I have seen examples of opening the xml document, but they are different from eachother so there is no way for me to know which one actually works.

另外，请注意我既不需要也不希望使用“.each”方法或任何循环。我只是想单独抓取一个节点值并将其放入一个html元素中，但我希望有一个两个文件（xml和javascript）中的内容的示例，以及如何打开xml文档。我见过打开xml文档的例子，但它们彼此不同，所以我无法知道哪一个实际有效。

I have also done some testing on this, but can't seem to get it to plot anything.

我也对此做了一些测试，但似乎无法用它来绘制任何东西。

2 个解决方案

#1

Main thing you need to understand is how the DOM works. If you do not know how the DOM works, you can find some info here

您需要了解的主要内容是DOM的工作原理。如果你不知道DOM是如何工作的，你可以在这里找到一些信息

In essence you're dealing with parent tags and children tags. With XML, you need to extract that information and from there you can do whatever you like.

实质上，您正在处理父标签和子标签。使用XML，您需要提取该信息，然后您可以随意执行任何操作。

If you go here to the left handside bar there are lots of examples and tutorials on how to manipulate XML DOM nodes

如果你到左侧的左侧栏中有很多关于如何操作XML DOM节点的示例和教程

Here are just a couple things to know though (my professor taught me this and they're useful tips)

这里有几件事要知道（我的教授教我这个，他们是有用的提示）

You can't use ids or classes. Instead you should be getting the XML nodes with

您不能使用ID或类。相反，您应该使用XML节点

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

var elements = node.getElementsByTagName（“tagname”）;
You can't use innerHTML to get the text inside a node. You could in HTML, but not for XML. For that you have to use

您不能使用innerHTML来获取节点内的文本。您可以使用HTML，但不能使用XML。为此你必须使用

var text = node.firstChild.nodeValue;

var text = node.firstChild.nodeValue;
You can't use .attributeName to get an Attribute. You need to use

您不能使用.attributeName来获取属性。你需要使用

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

var attrValue = node.getAttribute（“attrName”）;

Hope this helps. If you're still struggling, just ask.

希望这可以帮助。如果你还在苦苦挣扎，那就问问吧。

Alright well I've been trying to work with the examples on w3schools and I hope this helps. If it doesn't just ask:

好吧，我一直在尝试使用w3schools上的例子，我希望这会有所帮助。如果它不只是问：

Go to this example

转到此示例

I'm going to try to walkthrough this example but you should be getting a general idea of what's going on. They have an XML file known as cd_catalog.xml with all the information they need. When they press the button it simply displays all that information in an HTML format. If you look at the HTML code before and after you can see that the myDiv gets populated with all the artists in the xml file.

我将尝试通过这个例子，但你应该对正在发生的事情有一个大概的了解。他们有一个名为cd_catalog.xml的XML文件，包含他们需要的所有信息。当他们按下按钮时，它只是以HTML格式显示所有信息。如果你看到之前和之后的HTML代码，你会看到myDiv被xml文件中的所有艺术家填充。

Now let's look at the code.

现在让我们来看看代码。

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();
}

Some key things to point out. Step-by-step they have a function so when the document is fully loaded, and the code has been sent (this is checked by xmlhttp.status==200) he's going to pull all the xml data from cd_catalog.xml and store it into xmlDoc by getting the xmlhttp.responseXML

一些关键的事情需要指出。他们有一个函数，所以当文档完全加载，并且代码已经发送（这由xmlhttp.status == 200检查）时，他将从cd_catalog.xml中提取所有xml数据并存储它通过获取xmlhttp.responseXML进入xmlDoc

So now xmlDoc has all the information from cd_catalog.xml stored in a convenient variable. From there, he uses xmlDoc.getElementsByTagName("ARTIST"); to get an array of ALL the artists in the xml file and nothing else. He names this array x.

所以现在xmlDoc将cd_catalog.xml中的所有信息存储在一个方便的变量中。从那里，他使用xmlDoc.getElementsByTagName（“ARTIST”）;获取xml文件中所有艺术家的数组而不是其他内容。他将此数组命名为x。

Now he goes through this giant array known as x and for each index i (represented as x[i]) he gets the childNodes which returns an array with only one thing inside it (the text) which is why he refers to childNodes[0] index and he gets the .nodeValue of it. So NOW he has the text that was originally stored in the xml file in a variable called txt and he simply adds a </br> tag and whatever else HTML he wants and puts it via document.getElementById("myDiv").innerHTML so that it is translated into HTML format. This process repeats for each ARTIST tag in the xml file.

现在他经历了这个名为x的巨型数组，并且对于每个索引i（表示为x [i]），他得到了childNodes，它返回一个内部只有一个东西的数组（文本），这就是他引用childNodes [0的原因] ]索引，他得到它的.nodeValue。所以现在他将原始存储在xml文件中的文本存储在一个名为txt的变量中，他只需添加一个标记以及他想要的任何其他HTML，并通过document.getElementById（“myDiv”）将其放入.innerHTML so它被翻译成HTML格式。对xml文件中的每个ARTIST标记重复此过程。

I hope this helps. If you're still confused, let us know. And this does require you to know the xml file you're handling and where it is.

我希望这有帮助。如果您仍然感到困惑，请告诉我们。这确实需要您知道您正在处理的xml文件及其位置。

#2

Well, You can use an Ajax call to get the file to read, and in the success callback you can manipulate the data received from the file...

好吧，您可以使用Ajax调用来获取要读取的文件，并且在成功回调中您可以操作从文件接收的数据...

Assuming that the xml is like this:

假设xml是这样的：

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

To get the XML node, you can use:

要获取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);

    }
});

the $(selector) it's a jQuery way to define the html block you want to put the text...

$（选择器）它是一种jQuery方式来定义你想要放置文本的html块...

Example:

例：

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

selector can be $(".myClass") or $("#myID")

selector可以是$（“。myClass”）或$（“＃myID”）

See selectors for more information.

有关更多信息，请参阅选择器。

I hope this help.

我希望这有帮助。

#1