【JavaScript】脱JQuery！？メソッドを比べてみた！要素取得編

javascript

前回、jQueryでのクラス操作をJavascriptで書いてみましたが、割とjQueryってDOMの操作が簡単だったりすると思うんですよね。なので今回はDOM要素をどの取得するかにフォーカスしてみます。　

Javascript とjQueryの要素の取得を比べてみた

今回は、要素の取得という事で、親要素の取得／子要素の取得／兄弟要素（直前・直後）の取得／子要素（最初・最後）の取得／子孫要素の検索・取得を行ってしました。以下参考です。

See the Pen jqueryとjavascriptの比較 – 要素編 by kiriyama (@kirikirimai) on CodePen.

Javascript とjQueryの要素の取得例

全てを細かく説明していたら長くなるので、気をつかないといけないところ以外はサクッと記載していきます。　CSSのクラスの追加は前回説明してるので省略します。

親要素の取得するには

以下、JavascriptとjQueryの両方を記載します。


   
子要素




// jQuery
var parent = $("#jq_child").parent();
parent.addClass("addclass_red");

//Javascript
var jq_child = document.getElementById("js_child");
var parent = jq_child.parentNode;
parent.classList.add("addclass_red");

jQueryの場合はparent() メソッドで取得でいます。

Javascriptでは、parentNodeプロパティで親要素を取得しています。

子要素の取得するには


     
子要素のテキスト




// jQuery
$("#jq_parent")
  .children("p")
  .addClass("addclass_red");

//Javascript
var js_parent = document.getElementById("jq_parent");
var child = js_parent.children;
child[0].classList.add("addclass_red");

jQueryでは、children()でpタグを指定していますが、コンマで区切って複数指定することも可能です。

Javascriptも同様にchildrenプロパティを使用していますが、 要素オブジェクトの順序付けられたコレクションが配列として格納されます。その為、アクセスするには配列同様にchild[0]といったようにアクセスする必要があります。 

childNodes と children で子ノードを取得する場合について

javascriptにはchildrenの他にchildNodesというプロパティもあります。
この違いに関しては、childrenは要素ノードだけ、、例えばpタグやliタグの要素のみ取得するのに対して、childNodesはすべての子要素にあたるのでpタグやliタグの中にあるテキストノードも含まれます。
ただ大抵Javascriptで処理したいのでは特定のクラスを追加など要素を取得したいことが多いので、その場合はchildrenを使えばいいでしょう。

古い記事ですが、「[JavaScript]childNodes と children で子ノードを取得する」を参考にしてみてください。

兄弟要素（直前と直後）の取得するには

    
     
  • 1番目の要素
    • 
     
  • 2番目の要素
    • 
     
  • 3番目の要素
    • 



// jQuery
var next_dom = $("#jq_list_second").next();
next_dom.addClass("addclass_red");

var prev_dom = $("#jq_list_second").prev();
prev_dom.addClass("addclass_red");

//Javascript
vvar next_dom = js_list_second.nextElementSibling;
next_dom.classList.add("addclass_red");

var prev_dom = js_list_second.previousElementSibling;
prev_dom.classList.add("addclass_red");

jQueryではnext()とprev() メソッドで取得しています。


Javascriptでは、nextElementSiblingで次の要素、previousElementSiblingで前の要素を取得しています。

最初と最後の子要素を取得するには


        
これは最初の要素

        
テキストテキスト

        
これは最後の要素

 


// jQuery
$("#jq_fl_wrap p:first-child").addClass("addclass_red");
$("#jq_fl_wrap p:last-child").addClass("addclass_red");

//Javascript
var jq_fl_wrap= document.getElementById("jq_fl_wrap");
var first_child = jq_fl_wrap.firstElementChild;
first_child.classList.add("addclass_red");

var last_child = jq_fl_wrap.lastElementChild;
last_child.classList.add("addclass_red");

jQueryで最初の要素・最後の要素を取得する際は、CSSで使う:first-child と :last-child のセレクターを使用して取得する。

Javascriptでは、firstElementChild と lastElementChildで最初・最後の要素を取得できます。

子孫要素を検索して取得には


   
このテキストの背景は赤くしない

   
    
     
  • リスト要素
    • 
     
  • リスト要素
    • 
   

   
このテキストの背景を赤くする

 


// jQuery
$("#jq_find_wrap")
  .find("p#jq_txt,li")
  .addClass("addclass_red");

//Javascript
var find_dom = js_find_wrap.querySelectorAll("p#js_txt,li");
for (var i = 0; i <= find_dom.length; i++) {
  find_dom[i].classList.add("addclass_red");
}

jQueryではfind() という対象となる要素から下にある階層をすべて検索かけて目的の子要素を取得することができるメソッドです。
find()の引数に何もしてしなければすべてを取得しますが、特定のIDやクラス、要素などを指定して取得したり、カンマ区切りで複数の要素を指定することもできます。上記の例だと特定のidを持ったpタグとliタグを取得しています。

Javascriptの場合は、querySelectroAll()で取得することができます。jQuery同様に複数指定することもできます。
取得した要素をまとめて処理する場合はfor文で処理する必要があります。

querySelectorAllやquerySelectorについて

Javascriptには querySelectorAllの他にもquerySelectorというメソッドもありあます。 querySelectorも同様にHTML要素を検出・取得することができるメソッドです。
ただJavascriptにはdocument.getElementByIdや document.getElementByTagNameなどがありますが、こちらのほうが処理としては高速です。（目に見えて分かるほどでもありませんが、、）ただ querySelector の方がid・class属性値など意識しないで取得できるので便利かと思います。 「 脱jQuery .find() | q-Az 」のサイトが参考になります。

まとめ

さて、JavascriptとjQueryでの要素の取得に関して書きましたが、やっぱjQueryって便利ですよね。（笑）

今回は要素の取得に関して書いてみましたが、取得に関してはまだいくつかありあますし、あとはjQueryでの要素の追加などありますが、おって忘備録として記事にしたいと思っています。