如何在不修改 DOM 的情况下从元素中提取文本节点？

在不改变 DOM 结构的情况下检索文本节点

在某些场景下，需要在不修改元素结构的情况下提取元素的文本内容。例如，在以下 HTML 代码中：

<div>
<p>如果期望的输出是获取文本“我是文本节点”，同时保留“编辑”标签，则需要跨浏览器解决方案。</p>
<p><strong>利用 JavaScript 的 Element.contents() 和Node.TEXT_NODE</strong></p>
<p>为了实现这一点，我们可以利用 JavaScript 的 Element.contents() 和 Node.TEXT_NODE 属性。这是一个简洁而有效的代码片段：</p>
<pre class="brush:php;toolbar:false">var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

分解解决方案：

• $(".title").contents(): This函数返回所选元素内具有类“title”的所有直接子节点的集合。
• .filter()：过滤器函数循环遍历每个子节点，仅返回 Node.TEXT_NODE 类型的子节点。
• .text()：该方法提取过滤结果的文本内容。

因此，使用这种技术，我们可以在不改变HTML结构的情况下成功获取“我是文本节点”部分。该解决方案与所有主流网络浏览器兼容，确保跨浏览器功能。