Wie kann ich document.querySelector verwenden, um diesen Klassennamen mit einem Leerzeichen darin auszuwählen?

Question

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

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

Ich habe

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

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

mit Aber jetzt hat der Klassenname geändert: es gibt einen Raum und einig neuen Text in dem Klassennamen:

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

Wie kann ich el = document.querySelector(".PrmryBtnMed"); ändern um die richtige Klasse zu finden?

Ich versuchte mit el = document.querySelector(".PrmryBtnMed.ApricotWheat");, aber das hat nicht funktioniert.

Als nächstes habe ich versucht, ein Leerzeichen hinzuzufügen (und mit einem Backslash zu entkommen): el = document.querySelector(".PrmryBtnMed\ ApricotWheat");, aber das hat auch nicht funktioniert.

Also, ich fragte mich, ob ich für den Raum verwenden könnte .. aber kein Glück.

Ich wäre sehr dankbar für etwas Hilfe! Was mache ich falsch?

Answer 1

Klassen keine Leerzeichen haben können, was Sie haben es ein Element mit zwei ist separate Klassen darauf. So wählen Sie ein Element mit zwei Klassen, verwenden Sie eine Verbindungsklasse Selektor:

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

dass das erste Element in dem Dokument auswählt, die beide die PrmryBtnMed Klasse und die ApricotWheat Klasse. Beachten Sie, dass es egal ist, in welcher Reihenfolge diese Klassen im Attribut class erscheinen, und es spielt keine Rolle, ob auch andere Klassen vorhanden sind. Es wäre zum Beispiel eine dieser, entsprechen:

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

oder

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

oder

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

usw.

Beachten Sie auch, dass die Anführungszeichen Sie verwenden um HTML Attribute sind sporadisch ungültig; die Anführungszeichen um Attribute müssen normal, langweilig, single (') oder double (") sein, sie können keine schicken Zitate sein.

Live-Beispiel mit Zitaten fixiert und mit dem Selektor oben:

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

Es kann keine Leerzeichen in einen Klassennamen sein ... es gibt zwei verschiedene Klassen im Element sind ... verwenden ".PrmryBtnMed.ApricotWheat"