如何获取 HTML 元素的字符串表示形式

Posted

技术标签:

【中文标题】如何获取 HTML 元素的字符串表示形式【英文标题】:How to get string representation of HTML element 【发布时间】:2014-08-23 20:32:21 【问题描述】:

有没有什么方法可以轻松获得节点的字符串表示而不包含其内容?我的意思是 - element.outerhtml 返回元素及其内容的字符串表示形式。我想在没有element.innerHTML 的情况下得到类似element.outerHTML 的东西。

我想使用 console.groupconsole.groupEnd 为不支持的控制台回退 dirxml

【问题讨论】:

你能把outerHTML的输出换成空白吗?这可能是大量的代码,但我认为应该可以。 我更关心性能而不是代码量,它实际上是带有正则表达式的几行代码,甚至可能是单行代码。 "]/)[1]+">" 谢谢,正是我要找的东西 ;) 实际上,如果您想要最高速度,请避免使用 RegExp 并使用 element.outerHTML.split(">",2)[0]+">"; 使其更简单 【参考方案1】:
element.cloneNode(false).outerHTML

.cloneNode(false) 创建一个具有相同属性的重复节点,但不创建子节点,.outerHTML 返回与原始节点匹配的序列化,不包括节点的内容。

【讨论】:

它会比 element.outerHTML.replace(element.innerHTML.trim(),'') 慢吗? @user2111737 我猜不是。克隆一个元素,然后对其进行序列化可能比遍历整个树以序列化其内容然后进行搜索和替换更有效。您提出的方法也不可靠,例如考虑<body>body</body>。您的方法返回<>body</body>。如果你真的很关心性能,把测试用例放在jsperf.com

以上是关于如何获取 HTML 元素的字符串表示形式的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Xcode 中获取 HTML 元素?

jQuery怎么获取和字符串值相同的元素

C#中如何获取数组的最后一个元素?

如何使用 JavaScript 获取元素的填充值?

如何获取与 DOM 元素关联的事件?

如何使用简单的 HTML Dom 获取图像元素旁边的文本?