JavaScriptで要素選択する際に条件で除外・絞込する方法がわかりません

###質問概要
JavaScriptで要素選択する際に条件で除外・絞込する方法がわかりません。
ネイティブで書き方を教えてほしい。

JQueryの書き方が楽だったので初歩的な操作・情報の読み書きができるようになったレベルです。
脱JQueryといいますか、本来のネイティブなJavaScript/ECMAScriptでの書き方も知っておこう、
使ってみよう、書きなおしてみようと取り掛かっているのですがいきなり問題・壁にぶち当たりました。
小一時間検索して読んでいますがピンポイントで解決できる解説に巡り会えませんでした。

本題の質問なのですが以下のようなCSSセレクタを利用した選択方法の書き換え書き直しができず困っています。

JavaScript
1$('親').find('a[href*="foo"], a[href*="bar"]').not('a[href*="baz"]').each(function(){});

日本語で書くと、親から見た子要素の中からアンカータグの参照先属性(href)にfooまたはbarが部分一致するが、
そのうち参照先(href)にbazが部分一致したものは除外。絞り込まれたアンカータグのみそれぞれ関数に投入し処理、
といったことがしたいのです。

CSS由来の選択方法なのでquerySelectorAllを使うのかなと思っていますが、それ以上はお手上げでした。
JQueryでは短く簡潔に書けますが、本来のネイティブな書き方ではおそらく長い記述量になると思います。
答えを聞くという厚かましい質問になりますがどうかお助けお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

querySelectorAllメソッドを使うのならば、以下のように行うことができると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div class="parent">
9    <a href="text_foo_baz.html">text_foo_baz</a>
10    <a href="text_baz_text.html">text_baz_baz</a>
11    <a href="text_bar_baz.html">text_bar_baz</a>
12    <a href="text_foo_text.html">text_foo_text</a>
13    <a href="text_baz_text.html">text_baz_text</a>
14    <a href="text_bar_text.html">text_bar_text</a>
15</div>
16<script>
17    var elements = document.querySelectorAll(".parent a[href*='foo']:not([href*='baz']),.parent a[href*='bar']:not([href*='baz'])");
18
19    for (var i = 0; i < elements.length; i++) {
20        elements[i].style.color = "#ff0000";
21    }
22</script>
23</body>
24</html>

また、CSS4で追加されるmatches擬似クラスを使用することでもう少しquerySelectorAllメソッドに与えるセレクタを短く書くことができますが、まだ各ブラウザが対応していない状況です。

CSS
1.parent a[href*='foo']:not([href*='baz']), .parent a[href*='bar']:not([href*='baz']){} /* matches擬似クラスを使わない場合 */
2.parent a:matches([href*='foo'], [href*='bar']):not([href*='baz']){} /* matches擬似クラスを使う場合 */

投稿2017/10/12 18:47

編集2017/10/12 18:54

s8_chu

総合スコア14731

asagao

2017/10/13 10:44

回答ありがとうございます。おかげさまで教えていただいたその書き方・選択方法でバッチリ思ったことができました。 for の使い方はマスターしていましたので何をやっているのかもわかります。本問題は思っていたより簡単であっけにとられました。おそらく初歩中の初歩でしたのでしょうね。 JS/ESのネイティブな書き方を使っていきながら頭に叩きこんでいきたいと思います。

行動規範の内容に同意します

s8_chuさんの回答で必要十分だとおもいますが、一応別解。
querySelectorAllで要素をNodeListとして拾った後に
フィルタをかけて配列に受ける方法をあげておきます

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var ele=Array.prototype.filter.call(document.querySelectorAll('.parent a'),function(i){
3    return i.getAttribute("href").match(/(?!.*?baz).*?(foo|bar)/);
4  });
5  ele.forEach(function(i){console.log(i);});
6});

HTML
1
2<div class="parent">
3    <a href="text_foo_baz.html">text_foo_baz</a>
4    <a href="text_baz_text.html">text_baz_baz</a>
5    <a href="text_bar_baz.html">text_bar_baz</a>
6    <a href="text_foo_text.html">text_foo_text</a>
7    <a href="text_baz_text.html">text_baz_text</a>
8    <a href="text_bar_text.html">text_bar_text</a>
9    <a href="text_text_text.html">text_text_text</a>
10</div>

投稿2017/10/13 01:12

yambejp

総合スコア114806

asagao

2017/10/13 10:55

なるほど。見た目は字数が多くなりビビってしまいましたが、よく読んで見るとそこまで難しそうではないですね。アンカータグすべて選択し関数に投げて正規表現にマッチしたものだけで新しい配列を作って変数eleに返し、これをforEachでやりたいことをやるって感じですか・・・こちらの方法でもやりたいことが実現できますね。お二人の回答でJQueryの楽さ・有り難みを痛感しますが、ネイティブでの問題解決法を考えたり書いたりすることはいい頭の体操になりそうです。この度は時間を割いて別解を教えていただきありがとうございました。

行動規範の内容に同意します

あなたの回答