如何在DOM中定位无ID或class的HTML标签？以grape元素为例

针对你的HTML结构，有两种可靠方法可以定位目标元素：

方法1：用CSS :contains() 选择器（现代浏览器适用） #

直接通过querySelector结合文本匹配选择器：

const grapeLi = document.querySelector('li:contains("grape")');

注：:contains()目前已被Chrome、Edge等现代浏览器支持，若需兼容旧版浏览器，优先用方法2。

方法2：用XPath查询（兼容性拉满） #

如果需要适配更多浏览器，或者要精准匹配完全等于“grape”的文本，用XPath更稳妥：

const result = document.evaluate(
  '//li[text()="grape"]',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const grapeLi = result.singleNodeValue;

要是目标li的文本带有缩进或换行（比如你的HTML里的格式），可以用normalize-space()处理空白后匹配：

const result = document.evaluate(
  '//li[normalize-space(text())="grape"]',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const grapeLi = result.singleNodeValue;

normalize-space()会自动去除文本前后的空白，同时把中间的多个空白合并成一个，避免因格式问题匹配失败。

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