获取选中元素内id为id05的innerText时触发TypeError错误求助

首先得说，你的代码里有两个关键问题导致了这个报错，咱们一步步来理清楚：

1. 直接触发报错的原因 #

你写的 document.getElementById("id05")[i].innerText 存在明显问题：

• document.getElementById() 方法只会返回页面中第一个匹配该id的元素，因为HTML规范要求id是全局唯一的，所以它返回的是单个元素而非数组，自然不能用 [i] 去索引，这就是你看到 Uncaught TypeError: Cannot read property 'innerText' of undefined 的直接原因。

2. HTML结构的隐性问题 #

你的HTML里有多个 <span id="id05">，这违反了HTML的id唯一性规则。浏览器虽然不会直接报错，但会导致选择器行为不符合预期（比如getElementById永远只会拿到第一个匹配元素），这个问题必须优先修正。

修正后的完整方案 #

第一步：修复HTML的id重复问题 #

把所有重复的 id="id05" 改成class（比如 class="target-label"），修改后的HTML如下：

<ul id="items" class="clearfix">
  <!-- ---------- this item is selected --------------- -->
  <li class="item folder selected">
    <a href="/t1/">
      <!-- -------this is the element whose innerTEXT i want ----------- -->
      <span class="target-label label" title="t1">t1</span>
    </a>
  </li>
  <!-- ---------- this item is also selected --------------- -->
  <li class="item folder page selected">
    <a href="/upl/" target="_blank">
      <!-- -------this is the element whose innerTEXT i want ----------- -->
      <span class="target-label label" title="upl">upl</span>
    </a>
  </li>
  <!-- ---------- this item is not selected --------------- -->
  <li class="item file">
    <a href="Ff.html/" target="_blank">
      <span class="target-label label" title="Ff.html">Ff.html</span>
    </a>
  </li>
</ul>

第二步：修改JavaScript代码获取目标文本 #

现在可以在每个selected元素内部查找对应的target-label元素，代码如下：

function del() {
  // 存储所有选中元素的文本
  var names = [];
  // 获取所有带selected类的元素
  var selectedItems = document.querySelectorAll(".selected");
  
  for (var i = 0; i < selectedItems.length; i++) {
    // 在当前选中元素内部查找目标span
    var targetSpan = selectedItems[i].querySelector(".target-label");
    // 如果找到元素，就把innerText加入数组
    if (targetSpan) {
      names.push(targetSpan.innerText);
    }
  }
  
  console.log(names); // 会输出 ["t1", "upl"]
}

如果你暂时不想修改HTML（不推荐） #

虽然id重复不符合规范，但如果一定要保留现有HTML，也可以在每个selected元素内部查找#id05（注意：这是不规范写法，仅作临时方案）：

function del() {
  var names = [];
  var selectedItems = document.querySelectorAll(".selected");
  
  for (var i = 0; i < selectedItems.length; i++) {
    var targetSpan = selectedItems[i].querySelector("#id05");
    if (targetSpan) {
      names.push(targetSpan.innerText);
    }
  }
  
  console.log(names);
}

还是强烈建议你修正HTML的id重复问题，这是前端开发的基础规范，能避免很多潜在的bug。

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