为何使用querySelector无法定位带innerText属性的DOM元素？

核心问题出在CSS属性选择器的匹配规则：

• CSS里的[attr=value]属性选择器，只能匹配HTML元素原生的HTML属性（比如id、class、data-*这类写在标签结构里的属性）。
• 而innerText是DOM元素的JS API属性，它是JS层面用来读写元素文本内容的接口，并不会被转化为HTML元素的原生属性。你在浏览器开发者工具里查看这个label的HTML结构，根本看不到innerText="this is an element"这样的属性，自然无法被属性选择器匹配到。

解决办法 #

有几种可靠的方式可以实现你的需求：

1. 给元素添加自定义data-*属性

通过JS给元素添加自定义数据属性，然后用属性选择器匹配：

function createElementLabel (container) {
let labelElement = document.createElement("label");
container.appendChild(labelElement);
labelElement.classList.add(generateLetters());
labelElement.style.display = "inline-block";
labelElement.style.fontSize = "15px";
labelElement.style.color = "rgb(141, 145, 145)";
labelElement.innerText = "this is an element";
// 添加自定义数据属性
labelElement.dataset.labelText = "this is an element";
// 现在可以用这个选择器找到元素
console.warn(container.querySelector('LABEL[data-labelText="this is an element"]'));
return labelElement;
}

2. 用JS遍历判断文本内容

如果不想添加额外属性，可以通过JS遍历元素并判断innerText：

function createElementLabel (container) {
let labelElement = document.createElement("label");
container.appendChild(labelElement);
// 其他样式、类名、文本设置...
labelElement.innerText = "this is an element";
// 遍历筛选匹配文本的元素
const targetLabel = Array.from(container.querySelectorAll('LABEL'))
  .find(el => el.innerText === "this is an element");
console.warn(targetLabel);
return labelElement;
}

3. 注意：原生CSS没有标准的:contains()伪类

虽然jQuery有:contains()伪类可以匹配文本内容，但原生CSS目前没有标准化的实现（部分浏览器有非标准支持，兼容性差），不推荐在生产环境使用。

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