选择由用户脚本反应生成的动态 class 名称？

Question

我倾向于编写自己的用户脚本（又名 Violentmonkey / Tampermonkey 脚本；以前称为 Greasemonkey 脚本）。这样做时，我经常最终按 class 名称选择元素 - 使用本机 javascript 或让脚本加载 jQuery 并使用它。

我注意到有时我会看到动态生成的 class 名称，例如“SeriesIndexFooter-footer-3WmRg”，粗体部分似乎是一些随机生成的部分（我认为这是由 React 生成的？我自己没有使用过 React，但有时在遇到这些元素时会在其他元素名称中看到“React”）。显然，我可以按原样在我的脚本中硬编码这些 class 名称，它会起作用......但我担心的是，如果稍后更新站点/本地服务器应用程序，这将破坏我的用户脚本.

例如

// @run-at      document-end
var footer = document.querySelectorAll('.SeriesIndexFooter-footer-3WmRg');
 
//OR
// @run-at      document-end
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
var footer = jQuery('.SeriesIndexFooter-footer-3WmRg');

是否有更好的解决方案，既不依赖硬编码或完全避免 class 名称，又能降低我的脚本因 class 名称的随机部分而中断的风险变化？

Answer 1

您无法预测您正在谈论的 class 后缀。

用于封装样式的目的，以便它仅适用于该特定元素或元素组。

在您的情况下，您可以做的是使用少数 CSS select 或依赖于搜索属性中的值。在您的情况下，它看起来像这样：

document.querySelectorAll('[class*=SeriesIndexFooter-footer]')

如果您需要更具体，您可以链接 select 或。例如，您可以定位一种元素 div。链接 select 没有限制，或者更精确地 select 满足您的需要。

document.querySelectorAll('div[class*=SeriesIndexFooter-footer]')

使用此行，您将 select 所有 class 属性具有子字符串 "SeriesIndexFooter-footer" 且为 div 的元素。
Here is W3Schools doc for that

您可以在 W3Schools doc here

上找到更多适合您案例的 select

其他词搜索 CSS select您可以使用的词是：

[attribute=value]   [target=_blank] Selects all elements with target="_blank"
[attribute~=value]  [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value]  [lang|=en]  Selects all elements with a lang attribute value equal to "en" or starting with "en-"
[attribute^=value]  a[href^="https"]    Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]  a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]  a[href*="w3schools"]    Selects every <a> element whose href attribute value contains the substring "w3schools"

选择由用户脚本反应生成的动态 class 名称？

selecting dynamic class names generated by react from a user script?

greasemonkey

css-selectors

userscripts

tampermonkey

reactjs