javascript - 克隆节点不等于原始节点(使用 isEqualNode)

Question

我正在使用 Javascript 管理一个名称列表。当您选中一个框时，您的名字会出现在列表中。当您取消选中它时，它会被划掉。当您将框设置为不确定状态时，您的名字将被删除。

我在隐藏的 div 中获得了当前登录用户的名称。名称是带有样式属性的 span。

我使用 isEqualNode 检查名称是否已经在列表中。当页面加载时它在列表中时，它工作正常:找到名称，因此当框选中状态更改时更新。

for(var i=0 ; i < bullet.childNodes.length ; i++) {
    var node = bullet.childNodes[i];
    if(node.className == 'crossed')
        node = node.firstChild;
    if(node.isEqualNode(document.getElementById('curUser').firstChild))
        break;
}
// if i < bullet.childNodes.length, then we found the user's name in the list

当名称不在列表中时，我克隆范围。

var newName = document.getElementById('curUser').firstChild.cloneNode(true);
bullet.appendChild(newName);

这在视觉上有效。

但我偶然发现了一些棘手的事情:newName.isEqualNode(document.getElementById('curUser').firstChild) 是错误的!因此，如果框状态再次发生变化，将找不到新添加的名称，并会再次创建一个新名称。

这是跨度的样子:

<span style="font-weight: bold ; color: #003380 ;">Pikrass</span>

目前我只是让检查不那么严格(我可以只检查跨度内的文本数据而不是依赖 isEqualNode)，但我感兴趣的是为什么克隆节点可以与原始节点不同，根据 isEqualNode。

相关规范:cloneNode , isEqualNode

---

编辑:我使用 Firefox 和 Chromium 进行了测试。对于 Firefox，isEqualNode 返回 false，但对于 Chromium，它返回 true。感谢 Felix 指出这一点。

Answer 1

刚刚弄明白了。根据specification , isEqualNode 仅当两个元素具有相等数量的属性时才返回 true。但是如果源元素有一个 ID，它不会被复制，因为 ID 应该是唯一的，所以它的属性更少。使用类而不是 ID 可以正常工作。

标记:

<div id="withId">withId content</div>
<div class="withoutId">withoutId content</div>

JS:

function test(node) {
    var copy = node.clone(true);
    document.body.appendChild(copy);
    console.log('are equal: ' + copy.isEqualNode(node)
        + ', attributes lengths: ' + node.attributes.length + ' ' + copy.attributes.length
        + ', ids: ' + node.getAttribute('id') + ' ' + copy.getAttribute('id'));
}

test(document.getElementById('withId'));
// are equal: false, attributes lengths: 1 0, ids: withId null

test(document.getElementsByClassName('withoutId')[0]);
// are equal: true, attributes lengths: 1 1, ids: null null

http://jsfiddle.net/igorz/fxtDw/