XML: Select 节点的值而不是属性

Question

我有这段代码可以根据 child 的属性从 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 children of id=1.

我现在想要的是根据 KlasId value 而不是 attribute 删除 items (例如值 101010)，但不知何故不起作用：

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 select 或者 select 元素的值。请参阅此博文：Blog

Answer 2

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

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

这将 return 一个节点迭代器，您可以使用它来遍历节点，如 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 selector 来执行 selection:

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>

这也是一个跨浏览器的解决方案，但它将select元素基于包含比较而不是相等比较。

无关旁注：.map() 用于将一个数组投影到另一个数组。要执行一系列副作用，请使用 .forEach().

XML: Select 节点的值而不是属性

XML: Select nodes by it's value instead of attribute

javascript

xml

xpath

css-selectors