Javascript 获取不包括innerHTML的元素的完整HTML

是否有更好的方法只获取标记信息（标记名、类、样式、其他属性，无论是否为空，等等），而不使用innerHTML内容，并将开始标记和结束标记分开，而不是：

const outer=el.outerHTML
const inner=el.innerHTML
const tag_only=外部。替换（内部“”）；
常数匹配_END=/^]*>（）$/；
const match=match\u END.exec（仅标记）；
if（match==null）{//空标记，如
返回[tag_only，internal'”；
}否则{
const end_tag=匹配[2]；
常量开始标记=仅标记。替换（结束标记“”）；
返回[开始标记、内部标记、结束标记]；
}

这是可行的，但它似乎不是特别有效，需要两个调用来查询DOM，两个替换调用，以及一个正则表达式搜索（ugg）来获取浏览器/DOM已经分别拥有的一些信息

---

（FWIW，我正在开发一个元素/节点处理器，它需要遍历所有的子节点，修改一些子节点，然后重建大部分原始HTML，因此我需要经常递归调用这个函数，如果有一个更快的方法，速度会更好）

像

innerHTML

这样的方法，

outerHTML

代价高昂，因为它们解析调用它们的整个元素树，像这样构建DOM树的代价是指数级的，因此在性能良好的应用程序中应该避免使用它们， 事实上，一个看似不错的

childNodes

也很昂贵， 因此，为了获得最佳性能，您应该逐个节点构建树。 以下是您案例的可能解决方案：

const collect=函数（el）{
常量内部=[]；
if（el&&（el.nodeType===Node.ELEMENT\u Node
||el.nodeType===Node.TEXT\u节点）{
设clone=el.cloneNode（）；
clone.setAttribute？（'data-clone'，clone.tagName）；
让tag_only=clone.outerHTML；
让榆树；
常数匹配_END=/^]*>（）$/；
const match=match\u END.exec（仅标记）；
if（match==null）{//空标记，如
elm=[仅标记，内部，'；
}否则{
const end_tag=匹配[2]；
常量开始标记=仅标记。替换（结束标记“”）；
elm=[开始标记，内部，结束标记]；
}
这个。推（榆树）；
}
el=el.第一个孩子；
while（el）{
对方付费电话（内部，el）；
el=el.nextSibling；
}
归还这个；
};
log（collect.call（[]，document.body）.flat（无穷大）.join（“”））

可能重复的“标记名[w/原始大小写]”HTML不区分大小写，因此除了外来对象（如svg）外，您无法从已解析的文档中获取“原始大小写”。唯一的方法是将文件提取为文本，然后自己解析。在Netscape时代，从文件中获取文档树是可行的，现在这种可能性接近
0
，在许多情况下，
正文中只有一个
，建议的副本仅建议查找开始标记，而不是结束标记。谢谢@kaido。案例在这里并不是那么重要，所以从问题中删除了。谢谢Syduki——实际上，在调用outerHTML之前进行浅层克隆应该会快得多。非常感谢。