Javascript 按 Tag 搜索 XML 并获取同级节点

Javascript search XML by Tag and get the sibling nodes

本文关键字：获取节点 XML Tag 搜索 Javascript 更新时间：2023-09-26

我是javascript和xml的新手，并且在xml文件中搜索值并显示相关节点值时遇到问题。我有记事本和IE 8可以使用，并试图跟踪搜索xml文件以了解搜索字符串中的任何出现情况。我能够拼凑出一些有用的东西，无法让给定的代码工作;但是，它只是带回了我使用 getElementsByTagName 搜索的标签。

我正在使用由其他人生成的 xml，

但我无法控制 xml，所以对于每个，我什至不知道该怎么称呼它们，我想称它们为记录集，"节点系列"它可能没有所有字段。示例：图书>书名、作者、年份和价格而另一个将是示例：书籍->标题、作者、年份所以我想按标题搜索并带回相关字段。我想看看这是否可以使用我可用的工具，没有jsquery，Ajax，XPath....我 http://www.w3schools.com/dom/prop_element_firstchild.asp 检查了w3学校，它有我认为我需要什么，但无法使搜索功能（从堆栈溢出链接）工作。

试图添加我正在使用的最新代码;但是，我的大脑已经死了，似乎无法让它很好地显示。

XML = "test.xml"

<?xml version="1.0" encoding="UTF-8" ?> 
  <dataroot>
  <XML_x0020_Export>
  <ID>142450</ID> 
  <LI>B</LI> 
  <FI>G</FI> 
  <Status>Available</Status> 
  <Status-Date>2014-11-14T00:00:00</Status-Date> 
  <Status-Loc>Web</Status-Loc> 
  </XML_x0020_Export>
  <XML_x0020_Export>
  <ID>144230</ID> 
  <LI>F</LI> 
  <FI>T</FI> 
  <Status>Available</Status> 
  <Status-Date>2014-11-14T00:00:00</Status-Date> 
  <Status-Loc>In House</Status-Loc> 
  </XML_x0020_Export>
  <XML_x0020_Export>
  <ID>144240</ID> 
  <LI>F</LI> 
  <FI>P</FI> 
  <Status>NA</Status> 
  </XML_x0020_Export>
  </dataroot>

HTML = "new_test.htm"

<!DOCTYPE html>
 <head>
  <title>Read XML in Microsoft Browsers</title>
  <script type="text/javascript">
    var xmlDoc;
    function loadxml()
    {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = false;
      xmlDoc.onreadystatechange = readXML;
      xmlDoc.load("test.xml");
    }
    function readXML()
    {
       if(xmlDoc.readyState == 4)
       {
    var foundElements = []; 
    arrayOfElements = xmlDoc.getElementsByTagName("XML_x0020_Export");
    for (i=0;i<arrayOfElements.length;i++)
        {
        if (arrayOfElements[i].ID == 144230) 
            {           
            foundElements.push(arrayOfElements[i]);
            document.write("<br>" + "Match Found: " + i);
            document.write("<br>");
            }
        for (i=0;i<arrayOfElements.length;i++)
            {
            document.write("<br>");
            document.write("Not Found: " + i + "|nodeName: " + " " + arrayOfElements[i].nodeName + "|nodeValue: " + arrayOfElements[i].nodeValue);
            document.write("<br>" + "Parent Node = " + arrayOfElements[1].parentNode.nodeName); 
            }
        }
    }
    }
  </script>
 </head>
 <body onload="loadxml();">
 </body>
</html>

我希望得到一些东西，这样我就可以写到 html：

ID = 144230;LI = F;FI = T;状态 = 可用;状态-日期 =2014-11-14T00：00：00;状态-loc = 内部

但是如果我按"144240"搜索，它只会写：

ID = 144240;LI = F;FI = P;状态 = 不适用

但现在我得到的只是：

未找到：0|节点名称：XML_x0020_Export|节点值：空

父节点 = 数据根

未找到：1|节点名称：XML_x0020_Export|节点值：空

父节点 = 数据根

未找到：2|节点名称：XML_x0020_Export|节点值：空

父节点 = 数据根

好的，我已经修复了几件事。首先，您永远不会真正尝试在本地加载 xml 文件...... 您将从 Web 服务或类似内容中获取 xml 文件，然后对其进行操作。这在堆栈溢出上已经回答了很多次，我已经从您情况的复杂性中删除了它。所以我已将您的 xml 文件转换为字符串，使用新行将其连接起来。

其次，我认为我应该浏览代码行，边走边解释。

var foundElements = []; 
arrayOfElements = xmlDoc.getElementsByTagName("XML_x0020_Export");

这并没有改变，我们实例化了我们的数组并使用我们的 xml 元素加载它。

for (i=0;i<arrayOfElements.length;i++)

这将启动一个循环。我们希望遍历数组的起始索引（0），直到达到数组的长度，并在每次迭代时将计数器增加 1。

var output = "";

这是我们实例化每个元素的输出字符串。

for (x=0; x<arrayOfElements[i].childNodes.length; x++) {

这将启动我们循环中的第二个循环。我们希望遍历上一个循环的每个 xml 元素中的 XML 节点。我们使用arrayOfElements[i].childNodes返回所有子节点（ID，Status等）。然后，我们再次想要从数组的起始索引（0）开始，我们想要直到到达子节点的末尾。

if (arrayOfElements[i].childNodes[x].nodeType == 1) {

我们只想在节点类型为 1 的节点上运行。这些是我们的属性节点，包含我们真正关心的数据。

output += arrayOfElements[i].childNodes[x].nodeName + ": " + arrayOfElements[i].childNodes[x].firstChild.nodeValue + "'n";

然后我们将字符串与子节点名称（标题）和值（值）连接起来。

document.write(output);
document.write("<br>");

一旦我们点击元素中的最后一个节点，我们就想写入 html，并循环到下一个元素。

这一切都对我有用，它应该可以帮助您了解如何导航 xml 文档。似乎您没有使用的一件事是Javascript的内置调试。我不确定如果没有这个，JavaScript编程会有多复杂，这在我写给你的回应中是至关重要的。

https://developer.chrome.com/devtools/docs/javascript-debugging

最终代码：

<!DOCTYPE html>
 <head>
  <title>Read XML in Microsoft Browsers</title>
  <script type="text/javascript">
    var xmlDoc;
    function loadxml()
    {
      parser=new DOMParser();
      xmlDoc=parser.parseFromString(  "<dataroot> 'n" +
                                      "<XML_x0020_Export> 'n" +
                                      "<ID>142450</ID>  'n" +
                                      "<LI>B</LI>  'n" +
                                      "<FI>G</FI>  'n" +
                                      "<Status>Available</Status>  'n" +
                                      "<Status-Date>2014-11-14T00:00:00</Status-Date>  'n" +
                                      "<Status-Loc>Web</Status-Loc>  'n" +
                                      "</XML_x0020_Export> 'n" +
                                      "<XML_x0020_Export> 'n" +
                                      "<ID>144230</ID>  'n" +
                                      "<LI>F</LI>  'n" +
                                      "<FI>T</FI>  'n" +
                                      "<Status>Available</Status>  'n" +
                                      "<Status-Date>2014-11-14T00:00:00</Status-Date>  'n" +
                                      "<Status-Loc>In House</Status-Loc>  'n" +
                                      "</XML_x0020_Export> 'n" +
                                      "<XML_x0020_Export> 'n" +
                                      "<ID>144240</ID>  'n" +
                                      "<LI>F</LI>  'n" +
                                      "<FI>P</FI>  'n" +
                                      "<Status>NA</Status>  'n" +
                                      "</XML_x0020_Export> 'n" +
                                      "</dataroot>",
                                    "text/xml");
    }
    function readXML()
    {
        var foundElements = []; 
        arrayOfElements = xmlDoc.getElementsByTagName("XML_x0020_Export");
        for (i=0;i<arrayOfElements.length;i++)
            {
            var output = "";
            for (x=0; x<arrayOfElements[i].childNodes.length; x++) {
                if (arrayOfElements[i].childNodes[x].nodeType == 1) {    
                    output += arrayOfElements[i].childNodes[x].nodeName + ": " + arrayOfElements[i].childNodes[x].firstChild.nodeValue + "'n";
                }
            }
            document.write(output);
            document.write("<br>");
        }
    }
  </script>
 </head>
 <body onload="loadxml(); readXML()">
 </body>
</html>