document.querySelector() 可以根据 SRC 文件名（而不是完整的 URL）查找 IMG 元素吗？

Posted 2023-03-05

【中文标题】document.querySelector() 可以根据 SRC 文件名（而不是完整的 URL）查找 IMG 元素吗？

【英文标题】：Can document.querySelector() Find an IMG Element According to a SRC FileName (instead of full URL)?

【发布时间】：2020-08-20 13:53:50

【问题描述】：

我目前正在使用document.querySelector() 在当前页面上查找IMG 元素， 通过提供IMG 元素的SRC 属性值。

例如，我使用这一行：

var E =document.querySelector("img[src='https://images.website.com/folder1/folder2/12345.gif']");

可以看出，在此示例中，我有 SRC 属性中指定的图像的 完整 URL， 我将完整的 URL 提供给 document.querySelector()。

我现在需要稍微改进一下：

在某些情况下，我只知道图像的文件名， 并且 URL 的文件夹部分可能会更改，我不知道。

所以我的问题是： 我可以使用document.querySelector() 在当前页面上查找IMG 元素吗， 当我只知道图片 URL 的 FileName 部分时？

在上面的例子中，这意味着我有“12345.gif”， 但我不知道文件夹 1、文件夹 2 的名称..

【参考方案1】：

属性可以通过不同的符号来匹配。

[attr] // attribute itself
[attr=value] // is value
[attr~=value] // contains a word containing value
[attr|=value] // contains a complete word value
[attr^=value] // begins with value
[attr$=value] // ends with value
[attr*=value] // contains a part of value

在您的示例中检查 [src$=12345.gif]

【讨论】：

非常感谢 Markus，效果非常好。顺便说一句，当转到 document.querySelector() 的参考 (developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) 时，我没有看到您显示的后缀列表。它在另一个地方吗？或者我自己在哪里可以找到它？

详情可以阅读attribute selectors。