时间戳

首页 > 解决方案 > 如何在未包含在任何 HTML 标记内的 div 中获取文本副本？

html - 如何在未包含在任何 HTML 标记内的 div 中获取文本副本？

问题描述

我正在尝试获取 div 容器中的文本并根据文本内容执行一些逻辑，而不是更改它。我尝试使用Node.childNodes，但它返回一个实时节点列表而不是副本。

这是 DOM 结构，我只想从中获取text without a container。

<div class="container" >
    <span >text inside span</span> 
      text without a container
     <button>text inside button new</button>
     <button>text inside button</button>
  </div>

有任何想法吗？

编辑：

期望的输出：

'没有容器的文本' 作为字符串

标签： htmldom

解决方案

你可以使用这个：

const parent = document.getElementById('parent');

const nodes = parent.childNodes;

let text = "";

for (let node of nodes) {
  if (node.nodeName === '#text') {
    text += node.textContent.trim();
  }
}

console.log('Final result: ', text);
<div id="parent">
  <span>Inside span</span> 
  I'm free! as a bird!
  <span>I wish I was</span>
</div>

这将遍历所有子节点，并且只会提取不在另一个元素中的文本。

推荐阅读