如何通过JavaScript获取breadcrumb-item类元素内的span文本值

你已经获取到了.breadcrumb-item对应的索引为1的元素，可通过以下几种方式拿到内部span的文本值：

方式1：使用querySelector直接匹配（最简便） #

适合结构固定的场景，直接选中元素内部a标签下的span：

// 先存下你拿到的目标元素
const targetItem = document.getElementsByClassName("breadcrumb-item")[1];
// 获取span的纯文本内容，trim()用来去掉标签前后的多余换行、空格
const spanText = targetItem.querySelector('a span').textContent.trim();

如果你需要获取span内部的HTML内容（比如span里还有其他嵌套标签），把textContent换成innerHTML即可。

方式2：按DOM节点层级逐级获取 #

如果不想用选择器，也可以通过children属性按结构层级拿：

const targetItem = document.getElementsByClassName("breadcrumb-item")[1];
// targetItem.children[0] 是li下的a标签，a的第一个子节点就是目标span
const spanText = targetItem.children[0].children[0].textContent.trim();

注意事项 #

document.getElementsByClassName返回的是动态HTML集合，建议先判断元素是否存在，避免索引不存在时报错：

const breadcrumbItems = document.getElementsByClassName("breadcrumb-item");
if (breadcrumbItems.length >= 2) {
  const spanText = breadcrumbItems[1].querySelector('span').textContent.trim();
  // 在这里写拿到文本后的处理逻辑
}

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