如何通过Class类名获取元素内容（无ID可用场景）

没问题！针对你给出的HTML结构，咱们可以用纯JavaScript通过类名精准获取这些.tknz-token-label元素的内容，完全不需要依赖ID。先把你的HTML结构再贴一遍方便对照：

<div class="tknz-list"> 
  <div class="tknz-token" data-token="t">
    <span class="tknz-token-label">t</span>
    <span class="tknz-token-x">×</span>
  </div> 
  <div class="tknz-token" data-token="u">
    <span class="tknz-token-label">u</span>
    <span class="tknz-token-x">×</span>
  </div> 
  <div class="tknz-token" data-token="i">
    <span class="tknz-token-label">i</span>
    <span class="tknz-token-x">×</span>
  </div> 
</div>

下面是几种实用的实现方法：

方法1：使用document.querySelectorAll()（推荐，兼容性好且灵活） #

这个方法可以返回所有匹配指定选择器的元素节点列表，你可以直接用类选择器.tknz-token-label定位目标元素，然后遍历获取内容：

// 获取所有带.tknz-token-label类的span元素
const tokenLabels = document.querySelectorAll('.tknz-token-label');

// 遍历元素，获取每个元素的内容
tokenLabels.forEach(label => {
  console.log(label.textContent); // 依次输出t、u、i
});

如果需要把内容收集到一个数组里，可以这么写：

const tokenContents = Array.from(tokenLabels).map(label => label.textContent);
console.log(tokenContents); // 输出 ["t", "u", "i"]

方法2：使用document.getElementsByClassName() #

这个方法会返回一个HTMLCollection（动态元素集合），你可以把它转换成数组后再遍历：

// 获取所有带tknz-token-label类的元素
const tokenLabelsCollection = document.getElementsByClassName('tknz-token-label');

// 转换成数组再处理
const tokenLabelsArray = Array.from(tokenLabelsCollection);

tokenLabelsArray.forEach(label => {
  console.log(label.textContent); // 依次输出t、u、i
});

或者用传统的for循环遍历集合：

for (let i = 0; i < tokenLabelsCollection.length; i++) {
  console.log(tokenLabelsCollection[i].textContent);
}

方法3：先定位父容器再筛选（更精准） #

如果页面中有其他同名类的元素，你可以先定位到父容器.tknz-list，再在里面查找目标元素，避免误获取：

const listContainer = document.querySelector('.tknz-list');
const tokenLabels = listContainer.querySelectorAll('.tknz-token-label');

tokenLabels.forEach(label => {
  console.log(label.textContent);
});

以上几种方法都能满足你的需求，根据实际场景选就行~

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