Javascript 我如何使用 document.querySelector 来选择这个类名，里面有一个空格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29877777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use document.querySelector to select this class name with a space in it?
提问by Ted
<a href="javascript:void(0)" class="PrmryBtnMed"
id = "VERYLONGTEXT"
onclick="$(this).parents('form').submit(); return false;"><span>Dispatch to this address</span></a>
I have been using
我一直在使用
var inPage = document.documentElement.innerHTML.indexOf('text to search') > 0,
el = document.querySelector(".PrmryBtnMed");
if (inPage && el) el.click();
But now, the class name has changed: there's a space and some new text in the class name:
但是现在，类名发生了变化：类名中有一个空格和一些新文本：
<a href="javascript:void(0)" class="PrmryBtnMed ApricotWheat"
id = "VERYLONGTEXT"
onclick="ApricotWheat(this); return false;"><span>Dispatch to this address</span></a>
How can I change el = document.querySelector(".PrmryBtnMed");to find the right class?
我怎样才能改变el = document.querySelector(".PrmryBtnMed");以找到合适的班级？
I tried using el = document.querySelector(".PrmryBtnMed.ApricotWheat");but that didn't work.
我尝试使用，el = document.querySelector(".PrmryBtnMed.ApricotWheat");但没有用。
Next, I tried to add a space (and escape using a backslash): el = document.querySelector(".PrmryBtnMed\ ApricotWheat");but that didn't work either.
接下来，我尝试添加一个空格（并使用反斜杠转义）：el = document.querySelector(".PrmryBtnMed\ ApricotWheat");但这也不起作用。
So, I wondered if I could use %20for the space.. but no luck.
所以，我想知道我是否可以%20用于这个空间……但没有运气。
I'd be very grateful for some help! What am I doing wrong?
我会非常感谢一些帮助！我究竟做错了什么？
回答by T.J. Crowder
Classes can't have spaces, what you have there is an element with two separateclasses on it. To select an element with two classes, you use a compound class selector:
类不能有空格，你有一个元素，上面有两个单独的类。要选择具有两个类的元素，请使用复合类选择器：
document.querySelector(".PrmryBtnMed.ApricotWheat");
That selects the first element in the document that has boththe PrmryBtnMedclass and the ApricotWheatclass. Note that it doesn't matter what order those classes appear in in the classattribute, and it doesn't matter whether there are also other classes present. It would match any of these, for instance:
这将选择文档中同时具有PrmryBtnMed类和ApricotWheat类的第一个元素。请注意，这些类在class属性中出现的顺序无关紧要，是否还存在其他类也无关紧要。它将匹配其中任何一个，例如：
<div class="PrmryBtnMed ApricotWheat">...</div>
or
或者
<div class="ApricotWheat PrmryBtnMed">...</div>
or
或者
<div class="PrmryBtnMed foo baz ApricotWheat">...</div>
etc.
等等。
Also note that the quotes you're using around HTML attributes are sporatically invalid; the quotes around attributes mustbe normal, boring, single (') or double ("), they can't be fancy quotes.
另请注意，您在 HTML 属性周围使用的引号偶尔无效；属性周围的引号必须是普通的、无聊的、单 ( ') 或双 ( ")，它们不能是花哨的引号。
Live example with quotes fixed and using the selector above:
带有固定引号并使用上面的选择器的实时示例：
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>回答by rafaelcastrocouto
There can be no spaces in a class name ... there are two different classes in the element ... use ".PrmryBtnMed.ApricotWheat"
类名中不能有空格......元素中有两个不同的类......使用 ".PrmryBtnMed.ApricotWheat"
