如何获取数组中特定DOM元素文本内容及实现任务列表过滤？

嘿，我来帮你搞定这两个问题！先从获取数组里DOM元素的文本说起，再一步步实现你的任务列表过滤功能～

一、获取数组中特定DOM元素的文本内容 #

如果你已经把DOM元素存在数组里了，操作其实非常简单——直接用DOM元素的textContent或者innerText属性就能拿到文本内容：

• textContent：获取元素所有文本内容，包括隐藏元素里的文本，完全不受CSS样式影响
• innerText：只获取元素可见的文本内容，会遵循CSS的显示规则（比如隐藏的文本会被忽略）

举个实际例子，假设你已经把一组<li>元素转成了数组：

// 先把类数组的HTMLCollection转成真正的数组
const taskArray = [...document.querySelectorAll('li')];

// 获取数组中第2个元素的文本（数组索引从0开始）
const specificTaskText = taskArray[1].textContent.trim();
// trim()用来去掉文本前后的空格，避免多余空白干扰后续逻辑

二、任务列表过滤功能的完整实现 #

针对你提到的任务列表过滤需求，我把逻辑拆解成清晰的步骤，直接就能复用：

1. HTML结构参考 #

先确保你的输入框和任务列表有对应的ID，方便JS精准获取元素：

<input type="text" id="task-filter" onkeyup="taskFilter()" placeholder="搜索任务...">
<ul id="task-list">
  <!-- 动态生成的<li>任务项会插入到这里 -->
</ul>

2. JavaScript过滤函数实现 #

function taskFilter() {
  // 1. 获取用户输入的内容，统一转成小写并去除前后空格（实现不区分大小写的友好过滤）
  const userInput = document.getElementById('task-filter').value.trim().toLowerCase();
  
  // 2. 获取所有动态生成的<li>，并转成数组（HTMLCollection是类数组，转成数组才能用forEach等方法）
  const taskItems = Array.from(document.getElementById('task-list').querySelectorAll('li'));
  
  // 3. 遍历每个任务项，进行匹配判断
  taskItems.forEach(item => {
    // 获取任务项的文本内容，同样转成小写
    const taskText = item.textContent.trim().toLowerCase();
    
    // 4. 核心匹配逻辑：如果任务文本包含用户输入的内容，就显示；否则隐藏
    if (taskText.includes(userInput)) {
      item.style.display = 'list-item'; // 恢复<li>默认的显示样式
    } else {
      item.style.display = 'none'; // 隐藏不匹配的任务项
    }
  });
}

关键细节说明 #

• 为什么要转成数组？：querySelectorAll返回的是HTMLCollection（类数组对象），不能直接使用数组的forEach方法，所以用Array.from()或者展开运算符[...xxx]转成真正的数组才能方便遍历。
• 为什么要统一转小写？：实现不区分大小写的过滤，比如用户输入"milk"和任务里的"Milk"也能匹配上，大大提升用户体验。
• 用textContent还是innerText？：优先推荐textContent，因为它不会受CSS样式影响，能稳定获取所有文本内容；如果用innerText，如果任务项里有隐藏的文本（比如用display:none的子元素），会被忽略，可能导致过滤不准确。
• 如果只想获取纯文本节点？：如果你的<li>里没有其他子元素（比如按钮、图标），可以用item.firstChild.nodeValue获取第一个文本节点的值，但这种场景很少，textContent的通用性更强。

内容的提问来源于stack exchange，提问作者Mr-gray