如何从ul列表的li元素内的div中获取目标文本？

我来帮你搞定这个问题！你目前的代码只获取了li元素集合，但还没深入定位到你需要的div和里面的文本内容，咱们一步步调整就能拿到目标文本啦。

先梳理你的HTML结构 #

<ul class="category">
  <li class="hero" href="page1.htm">
    <a href="page1.htm"><img src="img/001.png" /></a>
    <div class="Hello">
      <a href="page1.htm">I need this text&nbsp;112</a>
    </div>
  </li>
</ul>

方案1：获取单个目标文本（仅一个匹配项时） #

直接通过选择器链精准定位到目标a标签，提取文本即可：

// 一步定位到目标a标签，提取并清理文本
const targetText = document.querySelector('.category .hero .Hello a').textContent.trim();
console.log(targetText); // 输出：I need this text 112

方案2：批量处理多个li元素（存在多个同类li时） #

如果页面里有多个带.hero类的li，每个里面都有.Hello类的div，可以用querySelectorAll批量处理：

// 获取所有符合条件的目标a标签
const targetLinks = document.querySelectorAll('.category .hero .Hello a');
// 遍历每个链接，提取文本
targetLinks.forEach(link => {
  const text = link.textContent.trim();
  console.log(text); // 逐个输出每个div里的目标文本
});

为什么你原来的代码没生效？ #

你之前的li = ul.getElementsByTagName('li');只完成了第一步——获取li元素，但没有继续深入到.Hello类的div和内部的a标签，自然拿不到你需要的文本内容。通过上面的选择器链，我们可以直接定位到目标元素，一步到位提取文本。

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