JavaScriptをbygetElementByIdとgetElementsByClassに置き換えることで、どのようにするのですか？

Question

私はjavascriptを使用して2番目の列のアルファベットをソートするためのSOF回答の1つを指しています。ここにはhttp://jsfiddle.net/mLYch/159/の例があります。 JS側で

それは私がクラスで同じことをしようと、それは動作しませんgetElementByIdをとid

<table id="caltbl"> 

var tbl = document.getElementById("caltbl").tBodies[0]; 

で呼び出しHTMLタグを持っています。

<table class="caltbl"> 

var tbl = document.getElementsByClass('caltbl').tBodies[0]; 

IDなしでスクリプトを実行する方法を教えてもらえますか？あなたが最初のものだけをしたい場合は

var tbl = document.getElementsByClass('caltbl')[0].tBodies[0]; 

Answer 1

ユーザーの代わりに.querySelectorにコードを変更する必要があると思いますので、

Answer 2

document.getElementsByClassは、（私はそのクラスで複数の要素が存在することができるため）配列を返します。

var tbl = document.querySelector('.caltbl > tbody'); 

---

それとも、複数の場合は、.querySelectorAllでループを使用します。

var tbls = document.querySelectorAll('.caltbl > tbody:first-of-type'); 
for (var i = 0; i < tbls.length; i++) { 
    var tbl = tbls[i]; 
    // ... 
} 

または、好きな場合は.getElementsByClassNameでループを使用できます。