将.outerHTML中的空字符串等同于remove（）？

Question

所以如果我有一个<span class="iii"></span>容器......我就知道了：

document.querySelector('.iii').outerHTML='';它删除了span并基本上从DOM中删除了span元素，并且其中的所有内容都正确吗？它是否真的从技术上删除/删除它？它执行remove（）的作用吗？

我问这个，因为.remove（）是一个新的实验方法，不是跨浏览器正确吗？我正在尝试使用跨浏览器方式来“删除元素”，outerHTML = '';为我做了这个，但我问这个问题，因为它似乎不是正确。 outerHTML的功能不是用于删除，（或可以是）还是它？ 编辑：添加.iii我的错误。

Answer 1

从DOM中删除元素时，它们之间似乎没有任何显着差异。对于你的情况，他们都删除了元素，这就是故事的结尾。

以下是最明显的差异（随意添加任何其他）：

outerHTML

• 这是一个吸气剂
• 它是一个setter（用于setter版本，可用于“删除”或“替换”元素）
• 当您要删除或替换元素时，您不需要像el.parentNode.removeChild(el)
那样了解其父级
• 它仅适用于字符串，然后将其解析为DOM对象
• 这是属性而非方法
• 大多数浏览器支持

remove

• 这是一种方法
• 它可以删除其中outerHTML在文本节点上不可用的元素和文本节点
• 它只能用于DOM对象而不能用于字符串
• 您不需要知道元素的父元素，而只需将其删除
• 大多数浏览器都不支持它，因为它是新的

Answer 2

没有区别，两者都会从DOM中删除元素，从而在垃圾收集器决定时从内存中删除所有事件处理程序和其他相关属性。至于性能，我写了一个快速测试http://jsperf.com/outerhtmlblank-vs-remove，结果发现outerHTML = ''在谷歌浏览器上的速度提高了14％，所以我认为最好使用它。随意在其他浏览器上测试以确认结果。

当你调用outerHTML = ''时，它会将HTML周围的内容设置为空，然后当浏览器更新它的DOM表示时，它会意识到该元素现已消失，并将其从DOM中移除，同时删除（）只是将其从DOM中删除。