如何通过ID和类名之外的方式选取指定DOM元素（Table示例）

针对你的场景，有两种直接可行的方案：

方案一：利用data属性直接选择 #

观察你的HTML，目标元素的data属性值是table，可以直接通过属性选择器精准定位，这是最简洁的方法：

const tableElement = document.querySelector('td.main[data="table"]');

如果需要确认元素是否存在，后续可以做个判断：

if (tableElement) {
  // 对元素进行操作，比如修改样式
  tableElement.style.color = 'red';
}

方案二：遍历元素并匹配文本内容 #

如果无法依赖data属性，只能通过文本内容匹配，可以先获取所有类为main的元素，再过滤出文本符合条件的：

// 获取所有类为main的td元素
const allMainElements = document.querySelectorAll('td.main');
// 转换为数组后，用find方法筛选文本内容为"Table"的元素
const tableElement = Array.from(allMainElements).find(el => el.textContent.trim() === 'Table');

这里用trim()是为了避免文本前后的空格导致匹配失败，比如如果元素文本是" Table "（带空格），也能正确匹配。

你之前用forEach没成功，大概率是没有正确保存筛选后的结果，或者没处理文本的空格问题。用forEach的写法可以是：

let tableElement;
document.querySelectorAll('td.main').forEach(el => {
  if (el.textContent.trim() === 'Table') {
    tableElement = el;
  }
});

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