我如何使用 document.querySelector 到 select 这个带有 space 的 class 名称？

Question

<a href="javascript:void(0)" class="PrmryBtnMed"
 id = "VERYLONGTEXT"

onclick="$(this).parents('form').submit(); return false;"><span>Dispatch to this address</span></a>

我一直在用

var inPage = document.documentElement.innerHTML.indexOf('text to search') > 0,
    el = document.querySelector(".PrmryBtnMed");

if (inPage && el) el.click();

但是现在，class 名称已更改：class 名称中有一个 space 和一些新文本：

<a href="javascript:void(0)" class="PrmryBtnMed ApricotWheat"
 id = "VERYLONGTEXT"
onclick="ApricotWheat(this); return false;"><span>Dispatch to this address</span></a>

我该如何改变el = document.querySelector(".PrmryBtnMed"); 找到合适的class？

我尝试使用 el = document.querySelector(".PrmryBtnMed.ApricotWheat");，但没有用。

接下来，我尝试添加一个 space（并使用反斜杠转义）：el = document.querySelector(".PrmryBtnMed\ ApricotWheat"); 但这也不起作用。

所以，我想知道我是否可以使用 %20 作为 space.. 但没有运气。

非常感谢您的帮助！我究竟做错了什么？

Answer 1

class 名称中不能有空格...元素中有两个不同的 classes...使用 ".PrmryBtnMed.ApricotWheat"

Answer 2

类不能有空格，你所拥有的是一个带有 两个单独的 class 的元素。要 select 具有两个 class 的元素，您可以使用复合 class select 或：

 document.querySelector(".PrmryBtnMed.ApricotWheat");

那 select 是文档中第一个具有 PrmryBtnMed class 和 ApricotWheat class。请注意，这些 classes 在 class 属性中的出现顺序并不重要，是否还有其他 classes 也无关紧要。它会匹配其中任何一个，例如：

<div class="PrmryBtnMed ApricotWheat">...</div>

或

<div class="ApricotWheat PrmryBtnMed">...</div>

或

<div class="PrmryBtnMed foo baz ApricotWheat">...</div>

等等

另请注意，您在 HTML 属性周围使用的引号偶尔无效；属性周围的引号必须是普通的、无聊的、单引号 (') 或双引号 (")，它们不能是花哨的引号。

固定引号并使用 select 或更高版本的实例：

var el = document.querySelector(".PrmryBtnMed.ApricotWheat");
if (el) {
  el.click();
}

function ApricotWheat(element) {
  alert(element.innerHTML);
}

<a href="javascript:void(0)" class="PrmryBtnMed ApricotWheat" id="VERYLONGTEXT" onclick="ApricotWheat(this); return false;"><span>Dispatch to this address</span></a>

我如何使用 document.querySelector 到 select 这个带有 space 的 class 名称？

How can I use document.querySelector to select this class name with a space in it?

html

javascript

css-selectors