getElementsByClassName（）でjavascriptでhtmlの表を取得して使用するにはどうすればよいですか？

Question

HTMLでテーブル内の要素を検出したいが、htmlでテーブルを見つけることができない。テーブルを検出できない... PS：HTMLを変更できない。

これは、これは私のコード

alert(document.getElementsByClassName('ep-dp-dt')); 

あるDOM

である私は、テーブルを検出したり、テーブルを使用したい、した後、私は

のような警告を得ることができますしかし、私はできません.. 私はこのようなテーブルを使用する

私が投稿しているようにHTMLで

document.getElementsByClassName('ep-dp-dt').rows 

と私のプログラムがクラッシュし、それが行を見つけることができません.....

、どのように取得し、テーブルのHTMLを使用するには？コードを教えてください。ありがとうございました ！

Answer 1

getElementsByClassNameは、要素の配列を返します。最初の要素を選択するには、そのように、[0]を追加する必要があります行を取得するためにその後

document.getElementsByClassName('ep-dp-dt')[0] 

、次のいずれかを試してみてください。

document.getElementsByClassName('ep-dp-dt')[0].rows 
document.getElementsByClassName('ep-dp-dt')[0].getElementsByTagName('tr') 

あなたは、各行の配列を取得します。

Answer 2

getElementsByClassNameは、そのクラスを持つ要素のリストを返します。要素にidを指定してgetElementById()を使用するか、または確かな場合は、1つの要素だけがそのクラスを持つようにします。document.getElementsByClassName('ep-dp-dt')[0]

Answer 3

getElementsByClassName要素の配列がページの1要素であっても返します。あなたは

console.log(document.getElementsByClassName('ep-dp-dt')[0].rows);

<table class="ep-dp-dt"> 
 
    <tr> 
 
    <td>A</td> 
 
    </tr> 
 
</table>

Answer 4

まずgetElementsByClassName方法（あなたのケースで、それは0になります）クラスの所望のインデックスを選択する必要がありますが返さから要素を取得する必要がありますテーブルを取得するので、HTMLCollectionまたはNodeListを返します。この

var table = document.getElementsByClassName('ep-dp-dt')[0]; 

などのコレクションそして、あなたが取得し、テーブル要素の行を反復処理することができ、この

のようなもの増加した互換性のため

for (var i = 0;i < table.rows.length; i++) { 
    var row = table.rows[i]; 

} 

Answer 5

（それがサポートquerySelector()を行い、一方、IE 8は、例えば、getElementsByClassName()をサポートしていない）私は、最初に一致したノード–なく供給を一致のNodeList –が返されdocument.querySelector()を使用してお勧めCSSセレクタ：

var table = document.querySelector('.ep-dp-dt'), 
    rows = table.rows; 

上記最初の（それは両方.ep-dp-dtセレクタに一致する文書の最初の要素が存在していると仮定して）<table>要素を取得し、ノードがのコレクションを取得するために使用すること変数をrows変数に格納します。

for (var i = 0, len = rows.length; i<len; i++){ 
    console.log(rows[i]); 
} 

それとも、最初の配列のように変換する場合は、代わりに、配列のメソッドを使用することができます：あなたがforループのいずれかを使用して、コレクションを反復処理する必要があります<tr>要素で動作するように明らかに

Array.from()を使用して配列にHTMLCollection：

Array.from(rows).forEach(function(tr) { 
    console.log(tr); 
}); 

あるいは、Array.fromは（）ES6からである、とあなたは以下の代替が可能である古いブラウザをサポートする必要があるかもしれませんよう：

Array.prototype.slice.call(rows, 0).forEach(function(tr) { 
    console.log(tr); 
}); 

はdocument.querySelector()が指定されたセレクタに一致する最初のノードが返されながら、そのセレクタに一致する要素が文書内に見つからない場合、それは、nullを返すこと、この時点で、注目に値します。それはrowsコレクション取得しようとする前に、table変数の存在をテストする価値があるかもしれないことを意味します

var table = document.querySelector('.ep-dp-dt'), 
    rows; 

if (table) { 
    rows = table.rows; 
}