XML：通过它的值而不是属性选择节点

Question

我有这段代码可以根据孩子的属性从 xml 列表中删除不需要的项目。

var xmlDoc=loadXMLDoc(filePath);

var unwanted = xmlDoc.querySelectorAll("item > KlasId[id='1']");
Array.prototype.map.call(unwanted, function(element){
    element.parentNode.parentNode.removeChild(element.parentNode);
});

这工作得很好，并删除了所有item 具有KlasId 子节点的id=1 节点。

我现在想要的是基于 KlasId value 而不是 attribute （例如值 101010）删除 items，但它在某种程度上不起作用：

var unwanted = xmlDoc.querySelectorAll("item > KlasId[value='101010']");
etc...

我的 XML：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<dataroot>
<item>
<KlasId id='1'>101010</KlasId>
</item>

<item>
<KlasId id='2'>101010</KlasId>
</item>

<item>
<KlasId id='3'>202020</KlasId>
</item>
</dataroot>

编辑：

function loadXMLDoc(filename)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // code for IE5 and IE6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}

Answer 1

你不能只用 CSS 来做，因为没有 CSS 选择器可以通过元素的值来选择。请参阅此博文：Blog

Answer 2

如果您只使用 Chrome（或 Firefox、Opera 或 Safari），那么您可以使用 XPath 来执行此选择：

var found = xmlDoc.evaluate("/*/item[KlasId = '101010']", xmlDoc);

这将返回一个节点迭代器，您可以使用它来遍历节点，如here 所述。

function getNodes(iterator) {
    var nodes = [],
        next = iterator.iterateNext();

    while (next) {
        nodes.push(next);
        next = iterator.iterateNext();
    }
    return nodes;
}

getNodes(found).forEach(function (node) {
    node.parentNode.removeChild(node);
});

var xmlDoc = $.parseXML("<dataroot><item><KlasId id='1'>101010</KlasId></item><item><KlasId id='2'>101010</KlasId></item><item><KlasId id='3'>202020</KlasId></item></dataroot>");

var found = xmlDoc.evaluate("//item[KlasId = '101010']", xmlDoc);

function getNodes(iterator) {
    var nodes = [],
        next = iterator.iterateNext();

    while (next) {
        nodes.push(next);
        next = iterator.iterateNext();
    }
    return nodes;
}

getNodes(found).forEach(function (node) {
    console.log('Removing node.');
    node.parentNode.removeChild(node);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Internet Explorer 不支持.evaluate()（或据我所知的任何 XPath 功能），因此如果您需要跨浏览器支持，我认为您需要使用第三方库。我推荐xpath.js，我是其中的贡献者。

另一种选择是使用 jQuery 的扩展 CSS 选择器来执行选择：

var $nodes = $(xmlDoc).find('item > KlasId:contains("101010")');

$nodes.remove();

var xmlDoc = $.parseXML("<dataroot><item><KlasId id='1'>101010</KlasId></item><item><KlasId id='2'>101010</KlasId></item><item><KlasId id='3'>202020</KlasId></item></dataroot>");

var $nodes = $(xmlDoc).find('item > KlasId:contains("101010")');

console.log($nodes.length);

$nodes.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

这也是一个跨浏览器的解决方案，但它会根据 contains 比较而不是相等比较来选择元素。

不相关的旁注：.map() 用于将一个阵列投影到另一个阵列上。要执行一系列副作用，请使用.forEach()。