如何使用document.querySelector选择带有空格的类名？

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();

但是现在,类名已经改变了:类名中有一个空格和一些新文本:

<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"); 找到合适的班级？

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

接下来,我尝试添加一个空格(并使用反斜杠转义):el = document.querySelector(".PrmryBtnMed\ ApricotWheat");但这也不起作用.

所以,我想知道我是否可以%20用于空间..但没有运气.

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

Answer 1

类不能有空格,你有一个元素,上面有两个独立的类.要选择具有两个类的元素,请使用复合类选择器:

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

该选择具有文件中的第一个元素都对PrmryBtnMed类和ApricotWheat类.请注意,这些类在class属性中出现的顺序并不重要,并且是否还存在其他类并不重要.它会匹配其中任何一个,例如:

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

要么

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

要么

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

等等

另请注意,您在HTML属性周围使用的引号是无效的; 属性的引号必须是正常的,无聊的,单(')或双("),它们不能是花哨的引号.

固定引号并使用上面的选择器的实例:

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>

Answer 2

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