Question

我发现了一个意外的cloneNode（true）行为，并且认为我记录了两个原因。＃1 - 从别人那里得到佐证，我认为我看到的是真的。＃2 - 因为我在这个网站上没有提到这个问题，所以让其他人遇到这个问题。

// var's not shown.
danglingNode = document.getElementById('Master').cloneNode(true);
// Modify all id names to make them unique.
allElements = danglingNode.getElementsByTagName('id');
for (i = 0; i < allElements.length; ++i) {
   ...
}

allElements.length返回0，即使我知道有许多元素包含id标记名称。

为了测试，我将'id'更改为'input'，现在长度准确，这意味着树结构在那里，但是通过'id'无法访问。我写了一个DOM walker函数，果然，树就在那里并加载了id标签名称。我得出的结论是，克隆产生的重复id名称无法通过id进行检索。 Mozilla开发人员网站警告说，克隆将导致重复的ID，并建议修改这些重复项以再次实现唯一性，但不提供实现它的方法。我认为一个简单的循环就足够了，但这显然不是真的。

我尝试创建一个片段（document.createDocumentFragment（））并在其下面附加danglingNode以查看是否可以通过'id'提供访问权限，但没有这样的运气。

最终我决定使用前面提到的DOM walker来不仅走树，而且使用新的id名称修复它。该功能如下：

function fixIds(element, prefix) {
   "use strict";
   // This is a recursive function, designed to walk the tree below "element"
   // and modify all id values by prefixing the existing id with a fixed "prefix".
   do {
      // console.log('typeof = ' + typeof element.id)
      if (typeof element.id === 'string' && element.id !== '') {
      if (debug) {console.log(element.id + ' -> ' + prefix + element.id);}
         element.id = prefix + element.id;
      }
      if (element.hasChildNodes()) {
            fixIds(element.firstChild, prefix);
      }
   } while (element = element.nextSibling);
}

有没有人有另一种处理克隆结构的方法来修改重复的id？

任何人都可以看到我所做的事情有什么问题吗？

我错过了一些明显的东西吗？

Answer 1

id是一个属性，而不是标记，因此getElementsByTagName('id')将不起作用。

您可以循环检查danglingNode元素，每次检查其ID。

for (i = 0; i < danglingNode.length; ++i) {
    if (!danglingNode[i].id) {
        // no id, do something
    }
}

如果节点是嵌套的，那么你需要使用递归（DOM行走）过程。

访问克隆结构中的重复ID

1 个答案: