JS「querySelectorAll」で複数指定する書き方を知りたいです。

Question

現在このように「.apple以外のa」という指定をしています。

var links = document.querySelectorAll('a[href]:not(.apple)');

これを「.apple以外のaと、.orange以外のa」という指定にしたいのですが、querySelectorAllにそのような指定方法はありますか？

もしございましたら具体的な書き方を教えて頂けませんでしょうか？

実際には下記コードの１行目で利用している流れです。

var links = document.querySelectorAll('a[href]:not(.apple)');
var cbk = function(e) {
	if(e.currentTarget.href === window.location.href) {
		e.preventDefault();
		e.stopPropagation();
	}
};
for(var i = 0; i < links.length; i++) {
	links[i].addEventListener('click', cbk);
}

Comments

[x_x]

appleのみ、あるいはorangeのみは対象でしょうか？
「.appleと.orange(との両方を持った要素)以外のa」「.apple以外かつ.orange以外のa」では異なってきます。

[akino5]

appleのみ、あるいはorangeのみでも対象です。
質問を次のように修正しておきました。
✕「.appleと.orange以外のa」
〇「.apple以外のa と .orange以外のa」

[x_x]

ここでの回答と、ベストアンサーに選んだのとでは食い違っているのですが……

Answer 1

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('a:not(.apple):not(.orange)'),function(x){
    x.style.color="red";
  });
});
</script>
<a href="#" class="apple">apple</a>
<a href="#" class="orange">orange</a>
<a href="#" class="apple orange">both</a>
<a href="#" class="">not set</a>

調整

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('a:not(.apple):not(.orange)'),function(x){
    x.addEventListener('click', function(e) {
      if(e.currentTarget.href === window.location.href) {
        alert("oops");
        e.preventDefault();
        e.stopPropagation();
      }
    });
  });
});
</script>
<a href="#apple" class="apple">apple</a>
<a href="#orange" class="orange">orange</a>
<a href="#both" class="apple orange">both</a>
<a href="#none" class="">not set</a>

not setを2度押しするとoopsが表示されます
しかしすでに1回めのクリックで#noneに飛んでいるのでe.preventDefault()する意味がないような？

Comments

[akino5]

ありがとうございます。linksとcbkという変数に入れてあとからforで使いたいんですが、質問のコードにある形式に直して頂くわけにはいきませんでしょうか？functionが入れ子になると分からなくなってしまうレベルでして。

[yambejp]

もとソースの内容に近づけました
ただ何をしたいかイマイチわからないので
挙動を確認の上、修正が必要でしたらご指摘ください

[akino5]

どうもありがとうございます。とてもわかりやすかったです。

Answer 2

,で区切ればできるかもしれません。

• Document.querySelectorAll()

次の例では、文書内にある "note" または "alert" のいずれかの class を持つ、すべての <div> 要素のリストを返します。

var matches = document.querySelectorAll("div.note, div.alert");

htmlを例示されるともう少し具体的な回答が可能になります。

Comments

[papinianus]

これだと思って試してるんですが'a:not(.apple, .orange)'みたいなCSSでならできるはず(chrome)の選択が動作しませんでした。報告まで。

[m.ts10806]

ご連絡ありがとうございます。
HTMLが例示されないと何とも言えないなと思って「かもしれない」とした上で最後に1行書いてます。

[akino5]

ほんとですね。だとしたら、こう、ですよね。

var links = document.querySelectorAll('a[href]:not(.apple), a[href]:not(.orange)');

なぜかできませんでした。( .apple も .orange もいずれも効かなくなる。)

HTMLは普通に

<a href="" class="apple">apple</a>
<a href="" class="orange">orange</a>
<a href="" class="melon">melon</a>

という程度ですね。