Question

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

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

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

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

Answer 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);

    }
});

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

示例：

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

选择器可以是$（“。myClass”）或$（“＃myID”）

有关详细信息，请参阅selectors。

我希望这有帮助。

Answer 2

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

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

如果您将here转到左侧的左侧栏，那么有很多关于如何操作XML DOM节点的示例和教程

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

您不能使用ID或类。相反，您应该使用
获取XML节点
var elements = node.getElementsByTagName("tagname");
您不能使用innerHTML来获取节点内的文本。您可以使用HTML，但不能使用XML。为此你必须使用

var text = node.firstChild.nodeValue;
您无法使用.attributeName获取属性。你需要使用

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

希望这会有所帮助。如果你还在苦苦挣扎，那就问问。

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

转到此example

我打算尝试一下这个例子，但你应该大致了解发生了什么。他们有一个名为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]），他得到childNodes，它返回一个内部只有一个数组的数组（文本）这就是为什么他引用childNodes[0]索引并获得.nodeValue的原因。所以现在他将原始存储在xml文件中的文本存储在一个名为txt的变量中，他只需添加一个</br>标记以及他想要的任何其他HTML，并通过document.getElementById("myDiv").innerHTML将其放入它被翻译成HTML格式。对xml文件中的每个ARTIST标记重复此过程。

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

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

2 个答案: