如何访问document.querySelectorAll获取的li集合中的span子元素？

嘿，这个问题我之前也碰到过，其实有好几种直观的方案可以解决，我给你梳理一下：

• 方案一：一步到位直接选中目标span
  如果你最终的目标就是.timeline li里的span元素，完全可以在初始选择器里直接定位，省去二次遍历的步骤，效率更高：

  // 直接获取所有.timeline li下的span元素
  var spans = document.querySelectorAll(".timeline li span");
  // 遍历这些span即可
  for (let i = 0; i < spans.length; i++) {
    console.log(spans[i].textContent); // 操作每个span的内容
  }
  

  如果你的span有特定类名（比如class="time-tag"），可以把选择器改成.timeline li span.time-tag，实现精准定位。

• 方案二：遍历li时用querySelector查找子元素
  要是你必须先处理li元素，再获取它内部的span，那可以用每个li元素自带的querySelector方法，它会在当前元素的子树里查找匹配的第一个元素：

  var items = document.querySelectorAll(".timeline li");
  for (let i = 0; i < items.length; i++) {
    // 获取当前li下的第一个span
    const targetSpan = items[i].querySelector("span");
    if (targetSpan) { // 先判断元素是否存在，避免报错
      console.log(targetSpan);
    }
  }
  

  如果要获取当前li下的所有span，就用querySelectorAll("span")，它会返回一个静态NodeList，用法和全局的querySelectorAll一致。

• 方案三：使用getElementsByTagName
  另一种传统方法是用getElementsByTagName，它会返回当前元素下所有指定标签名的子元素集合（HTMLCollection）：

  var items = document.querySelectorAll(".timeline li");
  for (let i = 0; i < items.length; i++) {
    // 获取当前li下的所有span
    const spanCollection = items[i].getElementsByTagName("span");
    // 遍历这个集合
    for (let j = 0; j < spanCollection.length; j++) {
      console.log(spanCollection[j]);
    }
  }
  

  注意这个集合是动态的，但在这个场景下基本不会影响使用。

• 方案四：通过children属性手动筛选
  如果你需要精细化筛选子元素，可以用children属性获取当前元素的所有直接子元素，再判断标签名：

  var items = document.querySelectorAll(".timeline li");
  for (let i = 0; i < items.length; i++) {
    const childElements = items[i].children;
    for (let j = 0; j < childElements.length; j++) {
      if (childElements[j].nodeName === "SPAN") {
        console.log(childElements[j]);
      }
    }
  }
  

  这个方法适合需要对所有子元素做额外判断的场景。

内容的提问来源于stack exchange，提问作者Sensoray