使用Ajax和JavaScript过滤XML节点列表

我正在尝试使用AJAX和JavaScript构建一个页面，该页面显示按节点值过滤的XML文件的内容。 XML与此类似：

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
  </cd>
  <cd>
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
  </cd>
  <cd>
    <title>Greatest Hits</title>
    <artist>Dolly Parton</artist>
    <country>USA</country>
  </cd>
  <cd>
    <title>Still got the blues</title>
    <artist>Gary Moore</artist>
    <country>UK</country>
  </cd>
</catalog>

---

（应插入var arrayCD和var表之间）。但我就是不能让它工作。如果有人能给出答案，我会很高兴。

如果您想这样做，必须为每个节点（表中的td）分配一些

数据属性，并在循环中设置
style=display:none
<代码>$（'[data country=“blah”]'）。每个（el=>$（el.style（'display'，'none'））

或者类似的东西，我再也记不起jquery api了。谢谢，它看起来不错，而且我也不是第一次认为jquery答案听起来很有说服力。不幸的是，由于公司的限制，我正在寻找的解决方案必须是XML和Javascript，没有jQuery或JSON。JSON（通常）是Javascript固有的。jquery只是

document.querySelector

的一个奇特的包装器……策略基本相同

function handleXML (xmlData) {
    var data = xmlData;
    var cd = data.getElementsByTagName("cd");
    var arrayCD = Array.prototype.slice.call(cd);

     var table = "<table>";
     table += "<tbody>";

     for ( var i = 0, len = arrayCD.length; i < len; i++ ) {
            table += "<tr>";
            table += "<td>"+ arrayCD[i].getElementsByTagName("title")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ arrayCD[i].getElementsByTagName("artist")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ arrayCD[i].getElementsByTagName("country")[0].firstChild.nodeValue +"</td>";
            table += "</tr>";
        }

        table += "</tbody>";
        table += "</table>";

    return table;
}

 arrayCD.filter(function(c) {
        var filterC = c.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;
        return (filterC = "UK");
    });