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"

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

2 个答案: