从 JS 中的 div 获取文本列表 - Javascript

在前端开发中，我们经常需要从页面中获取 DOM 元素的文本内容。在本文中，我们将讨论如何从 JS 中的 div 元素获取文本列表。

获取 div 元素

首先，我们需要获取包含我们要获取文本内容的 div 元素。可以使用 document.getElementById() 方法来获取特定的 div 元素。例如，假设我们有一个 id 为 "myDiv" 的 div 元素，我们可以使用以下代码来获取它：

const myDiv = document.getElementById("myDiv");

获取文本列表

获取文本列表的方法主要有两种：

1. 使用 innerHTML 属性

div 元素的 innerHTML 属性返回包含在元素中的 HTML。可以将其分割为行并使用 Array 的 map() 方法获取每行文本。例如：

const myDiv = document.getElementById("myDiv");
const textList = myDiv.innerHTML.split("\n").map((line) => line.trim());

2. 使用 childNodes 属性

div 元素的 childNodes 属性返回一个包含所有子节点的 Node 对象列表。可以使用 Node 类的 textContent 属性来获取每个子节点包含的文本内容。例如：

const myDiv = document.getElementById("myDiv");
const textList = Array.from(myDiv.childNodes)
  .filter((node) => node.nodeType === Node.TEXT_NODE)
  .map((node) => node.textContent.trim());

结论

在本文中，我们讨论了如何从 JS 中的 div 元素获取文本列表。我们介绍了两种方法：使用 innerHTML 属性和使用 childNodes 属性。这些技术都可以用于获取 DOM 元素的文本内容。