javascript - 更改元素的 outerHTML 会将其从数组中移除

Question

考虑以下片段:

var cites = document.getElementsByTagName('cite');
console.log(cites.length);
cites[0].outerHTML = "[" + cites[0].innerText + "]";
console.log(cites.length);

<cite>ASDF</cite>
<cite>FDSA</cite>

这两个 console.log 调用打印不同的值(分别为 2 和 1)，因为数组的第一个元素在分配给它的 outerHTML 时从数组中删除属性(property)。这是为什么？

Answer 1

Element.getElementsByTagName() 方法返回具有给定标签名称的元素的实时 HTMLCollection。搜索指定元素的所有后代，但不搜索元素本身。返回的列表是实时的，这意味着它会自动使用 DOM 树更新自身。 https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

所以在你改变了outerHTML之后，你改变了标签本身，而不是更多的“引用”