更改元素的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属性赋值时，数组的第一个元素被从数组中删除了。为什么会这样？

- Mate de Vita

Answer 1

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

所以当您更改了 outerHTML 时，您已更改了标签本身，并且不再是 “cite”。

- Vyacheslav Simonov