javascript - DOM 导航 : eliminating the text nodes

Question

我有一个读取和解析 XML 的 js 脚本。它从 XMLHttpRequest 请求(与返回 XML 的 php 脚本联系)获取 XML。该脚本应该在第一个 parentNode 下接收 2 个或更多节点。它需要的 2 个节点具有明确定义的名称，其他节点可以是任何名称。php 的输出可能是:

<?xml version='1.0'?>
<things>
    <carpet>
        <id>1</id>
        <name>1</name>
        <desc>1.5</desc>
    </carpet>
    <carpet>
        <id>2</id>
        <name>2</name>
        <height>unknown</height>
    </carpet>
</things>

这里所有的地毯都有 7 个节点。

但也可能是:

<?xml version='1.0'?>
<things>
    <carpet>
        <id>1</id>
        <name>1</name>
        <desc>1.5</desc>
    </carpet>
    <carpet><id>2</id><name>2</name><height>unknown</height></carpet>
</things>

这里第一 block 地毯有 7 个节点，第二 block 地毯有 3 个节点。我希望我的 javascript 代码以一种快速而干净的方式以完全相同的方式处理这两者。如果可能的话，我想删除每个标签之间的所有文本节点。因此，像上面这样的代码将始终被视为:

<?xml version='1.0'?>
    <things><carpet><id>1</id><name>1</name><desc>1.5</desc></carpet><carpet><id>2</id><name>2</name><height>unknown</height></carpet></things>

这是否可能以快速有效的方式实现？如果可能并且效率更高，我不想使用任何 get 函数(getElementsByTagName()、getElementById、...)。

Answer 1

遍历 DOM 并删除您认为为空的节点(仅包含空格)非常简单。

这是未测试(测试和修复，live copy here)，但它看起来像这样(显然用符号替换那些魔数(Magic Number)):

var reBlank = /^\s*$/;
function walk(node) {
    var child, next;
    switch (node.nodeType) {
        case 3: // Text node
            if (reBlank.test(node.nodeValue)) {
                node.parentNode.removeChild(node);
            }
            break;
        case 1: // Element node
        case 9: // Document node
            child = node.firstChild;
            while (child) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;
    }
}
walk(xmlDoc); // Where xmlDoc is your XML document instance

根据 JavaScript 解释器对 \s(空白)RegExp 类的理解，我对“空白”的定义是任何只有空白的东西。请注意，某些实现存在 \s 不够包容的问题(ASCII 范围外的几个 Unicode“空白”字符不匹配等)，因此请务必使用示例数据进行测试。