0

我发现 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 的方法？

谁能看出我所做的有什么问题？

我错过了什么明显的东西吗？

4

1 回答 1

1

id 是一个属性，而不是一个标签，所以getElementsByTagName('id')不会起作用。

您可以遍历danglingNode元素，每次检查它们的 id。

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

如果节点是嵌套的，那么您将需要使用递归（DOM 遍历）过程。

于 2013-07-26T16:36:19.563 回答