满足querySelectorAll节点列表中多个文本值的条件

querySelectorAll 是一个用于在文档中选择符合特定 CSS 选择器的所有元素的强大方法。它返回一个 NodeList 对象，该对象包含了所有匹配的元素。如果你需要根据多个文本值来筛选这些元素，你可以结合使用 JavaScript 的数组方法和 textContent 或 innerText 属性来实现。

基础概念

• CSS 选择器：用于指定你想要选择的元素的样式规则。
• NodeList：一个类数组对象，包含一组 DOM 节点。
• textContent/innerText：用于获取或设置元素的文本内容。

相关优势

• 灵活性：可以使用各种 CSS 选择器来精确选择元素。
• 效率：相比 getElementById 或 getElementsByClassName，querySelectorAll 提供了更广泛的选择能力。
• 兼容性：几乎所有现代浏览器都支持这个方法。

类型

• 静态 NodeList：querySelectorAll 返回的是一个静态的 NodeList，这意味着它不会随着 DOM 的变化而更新。

应用场景

• 数据验证：检查表单元素是否包含特定的值。
• 内容过滤：根据用户输入筛选显示的内容。
• 自动化测试：验证页面上的元素是否符合预期。

示例代码

假设我们有一个列表，我们想要找出所有包含特定文本值的列表项：

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
  <li>Apple Pie</li>
</ul>

我们想要找出所有包含 "Apple" 的 <li> 元素：

// 获取所有的列表项
const listItems = document.querySelectorAll('#myList li');

// 定义我们想要匹配的文本值
const searchText = 'Apple';

// 使用数组方法 filter 来筛选符合条件的元素
const filteredItems = Array.from(listItems).filter(item => item.textContent.includes(searchText));

// 输出结果
console.log(filteredItems);

遇到的问题及解决方法

问题：为什么 querySelectorAll 返回的 NodeList 不包含我期望的元素？

原因：

• 可能是由于选择器错误，没有正确匹配到元素。
• 可能是由于 JavaScript 代码在 DOM 完全加载之前执行了，导致没有元素被选中。

解决方法：

• 检查并修正 CSS 选择器。
• 确保 JavaScript 代码在 DOMContentLoaded 事件触发后执行，或者将脚本标签放在文档的底部。

document.addEventListener('DOMContentLoaded', function() {
  // 你的代码放在这里
});

通过这种方式，你可以确保在尝试选择元素时，DOM 已经完全加载并准备好被查询。