如何根据包含特定单词的属性选择元素

Question

我正在尝试从突变中定位 img，如下所示：

var image = mutation.parentElement.querySelector('img[alt="Text"]');

问题是，当图像有多个 alt 值时，它不会被检测到。仅当图像仅包含“文本”而不​​包含“演示文本”时，它才匹配图像。

我想要定位这样的图像：

<img src="demo.jpg" alt="Apple-one Text" />

和

<img src="demo1.jpg" alt="Text" />

Answer 1

您的选择器中缺少波浪号：

querySelector('img[alt~="Text"]')

波形符表示如果提供的值是该属性中包含的以空格分隔的值列表之一，则它将与该元素匹配。所以上面的内容会匹配，<img alt="alt Text here" />但不会<img alt="TextA" />。如果您确实想像第二种情况一样匹配子字符串，[attr*=val]那么可以这样做 - https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors