web-dev-qa-db-ja.com

document.querySelectorを使用して、スペースを含むこのクラス名を選択するにはどうすればよいですか？

_<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_を使用できるかどうか疑問に思いました。

私はいくつかの助けにとても感謝しています！何が悪いのですか？

javascripthtmlcss-selectors
15
Ted

クラスにスペースを含めることはできません。そこにあるのは、2つの別々のクラスを持つ要素です。 2つのクラスを持つ要素を選択するには、複合クラスセレクターを使用します。

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

bothPrmryBtnMedクラスと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>
19
T.J. Crowder

クラス名にスペースを含めることはできません...要素には2つの異なるクラスがあります... ".PrmryBtnMed.ApricotWheat"を使用してください

5
rafaelcastrocouto