如何使用querySelector通过innerText获取无ID/Class的DOM元素？

匹配文本按钮实现方案 #

原生document.querySelector仅支持标准CSS选择器语法，而标准CSS没有提供基于元素文本内容匹配的选择器，因此无法仅通过修改querySelector的入参字符串直接实现按innerText匹配元素，需要结合额外逻辑，以下是适配不同场景的实现方式：

通用原生JS实现 #

先通过querySelectorAll匹配所有按钮元素，再遍历筛选文本符合要求的元素：

// 精准匹配文本（trim处理避免多余空格干扰）
const signUpBtn = Array.from(document.querySelectorAll('button')).find(
  btn => btn.textContent.trim() === 'sign up'
)

如果需要模糊匹配，可调整判断规则：

// 忽略大小写、前后空格的模糊匹配
const signUpBtn = Array.from(document.querySelectorAll('button')).find(
  btn => btn.textContent.trim().toLowerCase() === 'sign up'
)

React单元测试场景最优实现 #

React单元测试通常使用@testing-library/react，官方提供了更贴合测试场景的文本匹配API，不需要手动编写筛选逻辑，性能和可靠性更高：

import { screen } from '@testing-library/react'

// 精准匹配按钮文本
const signUpBtn = screen.getByRole('button', { name: 'sign up' })

// 忽略大小写的模糊匹配
const signUpBtn = screen.getByRole('button', { name: /sign up/i })

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