「脱jQuery」というキーワードもちらほら見かけますが、jQueryのメソッドをネイティブのJavaScriptでどのように置き換えられるのかというのを知っておくと、よりjQueryへの理解も深まるのではないでしょうか。ということで、今回で第3回目になりますが引き続きjQueryのメソッドをネイティブのJavaScriptで置き換えていきたいと思います。   今回は要素の選択や絞り込みなどの走査系のメソッドになります。こちらについて詳しくは過去記事「jQueryのトラバースメソッドについて」をご参考ください。  

祖先・親要素の走査選択：parents() / parent() / closest()

走査系の基本となるメソッドで、親要素や祖先要素を遡って取得するのが「parents()」「parent()」「closest()」になります。引数にはセレクタを指定できますので、親要素や祖先要素限定での要素のフィルタリングができます。closest()メソッドは指定したセレクタにマッチする最も近い祖先要素を取得するものになりますが特性上よく使うメソッドですね。 【jQuery】

// 全ての祖先要素
$("#hoge").parents();

// 親要素
$("#hoge").parent();

// 最も近い指定の祖先要素
$("#hoge").closest('#fuga');

  ネイティブのJavaScriptの場合には下記のように置き換えることができます。まず、parents()メソッドの場合には全ての祖先要素を取得するので、現在の要素からHTML要素まで親要素を遡っていく必要があります。while文で親要素を配列に入れることを要素のタグ名がHTMLでない間、繰り返していく形になります。最後に値を返す場合には即時関数の中でreturnするなどで対応します。   親要素のみの場合には、Elementオブジェクトの「parentNode」プロパティを参照するだけでOKです。また、closest()メソッドはネイティブの方も同じメソッドが用意されていますので簡単ですね。 【JavaScript】

// 全ての祖先要素
const element = document.getElementById('hoge');
let targetElement = element;
let targetTagName = targetElement.tagName;
let result = [];
while (targetTagName !== 'HTML') {
  targetElement = targetElement.parentNode
  targetTagName = targetElement.tagName
  result.push(targetElement)
}
(() => {
  return result;
})();

// 親要素
const element = document.getElementById('hoge');
element.parentNode

// 最も近い指定の祖先要素
const element = document.getElementById('hoge');
element.closest('#fuga');

   

子孫・子要素の走査選択：children() / find()

こちらも先ほどと同じく基本となる走査系のメソッドです。「children()」「find()」で子要素あるいは子孫要素から特定の要素を取得することができます。こちらも引数にセレクタを入れることができます。どちらかというと子要素や子孫要素を取得することの方が多いイメージがありますね。 【jQuery】

// 子要素
$("#hoge").children();

// 指定の子孫要素
$("#hoge").find('#fuga');

  ネイティブのJavaScriptでは簡単に置き換えることができます。子要素のみであれば、親要素と同じような感じで、Elementオブジェクトの「children」プロパティを参照するだけです。子孫要素の場合にはElementオブジェクトに対して「querySelectorAll()」メソッドを実行することで同じような機能が実現できます。 【JavaScript】

// 子要素
const element = document.getElementById('hoge');
element.children;

// 指定の子孫要素
const element = document.getElementById('hoge');
element.querySelectorAll('#fuga');

   

兄弟・隣接要素の走査選択：siblings() / prev() / next()

親要素や子要素以外にも、兄弟要素を操作する場合も多々あります。jQueryではこれらの操作も専用のメソッドが用意されており「siblings()」を使う形になります。もし隣接する場合であれば「prev()」や「next()」というのも使うことができます。 【jQuery】

// 全ての兄弟要素
$("#hoge").siblings();

// 隣接する1つ前の兄弟要素
$("#hoge").prev();

// 隣接する1つ後の兄弟要素
$("#hoge").next();

  ネイティブのJavaScriptの場合、隣接する兄弟要素であれば、それぞれElementオブジェクトに対して「previousElementSibling」もしくは「nextElementSibling」プロパティを参照することで取得できます。ただ全ての兄弟要素の場合にはこの隣接する要素の取得を繰り返していく形となるので少しややこしいですね。ここでは直前の兄弟要素と、直後の兄弟要素をそれぞれ順に取得していき配列に代入する形でまとめています。対象となる兄弟要素がなくなるまでwhile文で繰り替えしていきます。 【JavaScript】

// 全ての兄弟要素
const element = document.getElementById('hoge');
let targetElementForPrevious = element;
let targetElementForNext = element;
let result = []
while (targetElementForPrevious.previousElementSibling !== null) {
  targetElementForPrevious = targetElementForPrevious.previousElementSibling;
  result.push(targetElementForPrevious)
}
while (targetElementForNext.nextElementSibling !== null) {
  targetElementForNext = targetElementForNext.nextElementSibling;
  result.push(targetElementForNext)
}
(() => {
  return result;
})();

// 隣接する1つ前の兄弟要素
const element = document.getElementById('hoge');
element.previousElementSibling;

// 隣接する1つ後の兄弟要素
const element = document.getElementById('hoge');
element.nextElementSibling;

   

インデックスの取得・要素のn番目を選択：index() / eq()

こちらもよく見かけるメソッドで、インデックスに対応した要素を取得する場合によく使われるものです。「index()」メソッドでは兄弟要素の中でのインデックス番号を、「eq()」メソッドでは引数で指定されたインデックス番号の要素を取得できます。これらは組み合わせて使われることが多いのではないでしょうか。 【jQuery】

// 指定要素の兄弟要素内におけるインデックスを取得
$("#hoge").index();

// 兄弟要素の中でn番目の要素を選択
$("ul#list > li").eq(INDEX);

  ネイティブの場合には少し複雑になります。インデックスは配列処理のメソッドであるArray.indexOf()メソッドで取得できます。そのためには対象の要素を取得して配列に格納しておく必要がありますね。n番目の要素を取得する場合には、HTMLコレクションとして取得した要素群からElementsオブジェクトに対して添字を指定するだけでOKです。 【JavaScript】

// 指定要素の兄弟要素内におけるインデックスを取得
const element = document.getElementById('hoge');
const targetElements = element.parentNode.children;
Array.from(targetElements).indexOf(element)

// 兄弟要素の中でn番目の要素を選択
const elements = document.querySelectorAll('ul#list > li');
elements[INDEX];

   

特定範囲の要素を選択：slice()

jQueryでは複数の要素の中からいくつか絞って選択する場合に「slice()」メソッドが使われます。第一引数には開始のインデックスを、第二引数には終了のインデックスを指定することでそのインデックスの数字内の順番にあたるもの全てを取得できます。この際に終了のインデックスに該当するものは対象とならないので注意します。 【jQuery】

$("ul#list > li").slice(START_INDEX, END_INDEX);

  ネイティブのJavaScriptだと、配列操作のメソッドである「Array.slice()」がそのまま使えそうですね。引数も同じなので簡単に置き換えることができますが、querySelectorAllを使って要素を取得した場合、返り値はHTML Collection型になるので、Array.from()などで配列型に変換しておきます。 【JavaScript】

const elements = document.querySelectorAll('ul#list > li');
Array.from(elements).slice(START_INDEX, END_INDEX);

   

指定要素の中に特定のclassが含まれるかのチェック：hasClass()

その要素に対して特定のclassが含まれているとtrueをそうでない場合にはfalseを返す「hasClass()」メソッドです。引数には対象となるclass名を入れる形になります。こちらもclass操作系と合わせてよく見かけますね。 【jQuery】

$("#hoge").hasClass('fuga');

  addClass、removeClassなどのメソッドと同じく、Elementオブジェクトの「classList」プロパティを参照し、そこに対して「contains()」メソッドを実行することで同じような機能が実現できます。引数にはjQueryの時と同じようにclass名が文字列で入ります。 【JavaScript】

const element = document.getElementById('hoge');
element.classList.contains('fuga');

   

条件での要素絞り込み：filter() / not()

特定の要素の中で、セレクタ指定で要素を絞り込みできるのが「filter()」と「not()」メソッドになります。どちらも引数には対象となるセレクタを入れることができます。filter()とnot()はそれぞれ対称となる結果になります。 【jQuery】

// 指定要素から条件にマッチする要素を選択
$("div").filter('#hoge');

// 指定要素から条件にマッチしない要素を選択
$("div").not('#hoge');

  ネイティブのJavaScriptの場合だと、配列操作のメソッドである「Array.filter()」を使うことでそのまま代用できそうですね。少し面倒ですが、検索対象のセレクタに合うプロパティをElementオブジェクトで参照する形になります。（下記はid属性のプロパティを参照する例です） 【JavaScript】

// 指定要素から条件にマッチする要素を選択
const elements = document.querySelectorAll('div');
const result = Array.from(elements).filter((element) => {
  return element.id === 'hoge';
});

// 指定要素から条件にマッチしない要素を選択
const elements = document.querySelectorAll('div');
const result = Array.from(elements).filter((element) => {
  return element.id !== 'hoge';
});

  filter()とnot()はちょうど対称となる結果になるので、処理自体はそのまま流用できますね。マッチするかしないかの違いですので、条件分岐のところを変えてあげるだけでOKです。  

---

  今回もjQueryのメソッドをネイティブのJavaScriptで置き換えてみるサンプルをまとめてみました。最近のJavaScriptでは配列操作のメソッドなどネイティブでも便利な処理が用意されていますので、今後はもっと簡単に置き換えできるようになりそうですね。   （参考記事） ・jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えてみる＃1：基本的な操作 ・jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えてみる＃2：値の取得・設定