【子要素の指定方法？】jQueryをプレーンなJavaScriptで使う方法

Question

現在簡単なスライダーを製作中で、
jQueryでの実装はできたのですが、プレーンなJavaScriptで書こうと挑戦するとエラーが出てしまいました。

「li.activeの次の要素があれば取得して、なければ最初に戻る」部分のコードなのですが、
「Uncaught TypeError: t.queryAll is not a function」というエラーが出てしまします。

var $active = $('#slide li.active');
var $next = $active.next('li').length ? $active.next('li') : $('#slide li:first');

上記jQueryをプレーンなJavaScriptでの記述方法を考え中です。

var doc = document;
var slide = doc.getElementById('slide');
var childs = slide.querySelectorAll('li');
var $active = slide.querySelector('.active');
var $next = $active.queryAll('~ li').length ? $active.nextElementSibling : childs[0];

slide.querySelector('.active')の部分がうまく取れてないようなのですが、
行き詰まってしまいました。

よろしくお願いします。

Answer 1

queryAll の誤字は修正頂けたので、残る問題はここですね。

var $next = $active.queryAll('~ li').length ? $active.nextElementSibling : childs[0];

~ はコンテキストノードをルートとした相対的なセレクタを指定することを意図していると思われますが、そのような書き方は出来ません。
~ は2つのセレクタを繋ぐ結合子であり、先頭に指定することは出来ません。

• 14.4. 後続-同胞 結合子 ( ~ ) - Selectors Level 4 （日本語訳）

このようなケースを想定して、Selectors Level 4 では :scope が用意されていますが、まだ実用段階にはありません。

• 8.4. 起点要素 疑似クラス :scope - Selectors Level 4 （日本語訳）
• Selectors API 2でコンテキストを記す:scope - CSS4セレクタ (Selectors Level 4) の新機能

<ul id="slide">
  <li>a</li>
  <li class="active">b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

<script type="text/javascript">
'use strict';
var slide = document.getElementById('slide');
var childs = slide.querySelectorAll('li');
var active = slide.querySelector('.active');
var next = active.querySelectorAll(':scope~li').length ? active.nextElementSibling : childs[0];
</script>

現実的には下記コードになるであろうと思います。

var next = active.nextElementSibling || childs[0];

ところで、セレクタの相対指定は jQuery でも未対応だったと思うのですが、なにがしかの方法が存在したでしょうか。
現状、セレクタ的な文法で相対指定をしようとしたら、XPath ぐらいしか私は思いつきません。

Re: helloman さん

Comments

[helloman]

どこのサイトか忘れましたが、理解せずコピペで使ってました。m_ _m
jQueryで言う.next()がしたかった結果でした。

[think49]

http://qiita.com/tatesuke/items/b9548dd484b01b139b74 を参照する事をお勧めします。
日本語訳で間違った説明が一部にありますが、合わせてコメントを参照して下さい。

Answer 2

まずはqueryAll の箇所をquerySelectorAll にするところから

sample

一応sampleつけておきます
.aciveをつけたりはずしたり、別のところにつけたりして確認してみて下さい

<script>
window.onload=function(){
  var n1=document.querySelector("#slide").querySelectorAll("li");
  var n2=document.querySelector("#slide").querySelector("li.active");
  var v=(n1==null || n2==null)?"no active":(n2.nextElementSibling||n1[0]).innerHTML;
  console.log(v);
};
</script>
<ul id="slide">
<li>test1</li>
<li>test2</li>
<li class="active">test3</li>
<li>test4</li>
<li>test5</li>
</ul>

Comments

[helloman]

サンプルありがとうございます。
ちょっと挑戦してみます。

Answer 3

.querySelectorAll()はNodeListを返しますので、.querySelector()メソッドを直接使うことはできません。.forEach()メソッドなどを介してください。
NodeList.prototype.forEach() - Web APIs | MDN

Comments

[Lhankor_Mhy]

あ、違うんですね。コードを読み違えました、失礼しました。
え、でも、それでいいのかな？

[Lhankor_Mhy]

ああ、いいんですね。重ね重ね失礼をいたしました。

[helloman]

ありがとうございます。
入り口がjQueryだったので苦戦中です。

Answer 4

querySelectorAllを利用するのであれば、
細切れに利用するのではなく

var $active = slide.querySelector('#slide li.active');
でいけるんじゃないですかね（多分）
ツリー構造側明確であれば、以下を組み合わせた方が良さそうに思います（速度的に）
getElementById
getElementsByClassName

Comments

[helloman]

参考にさせていただきます。