用 javascript DOM 遍歷一個表

Question

我知道這是有史以來最簡單的問題，但我似乎無法找到答案，而且我正在黑暗中尋找，所以不勝感激。 我試圖在 class='song_artist' 的節點中獲取文本。 我有對父節點的引用，但無法找到我要查找的文本。 我的 html 看起來像這樣：

<tr id='0000moe2008-05-23d01t01_vbr' class='row-even'><td class='song_name'>Captain America<h3> (00:00)</h3></td><td class='song_artist'>moe.</td><td class='song_date'>2008-05-23</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>  
<tr id='00011-01_Rock_And_Roll_Part_2' class='row-odd'><td class='song_name'>Rock and Roll part 2<h3> (00:00)</h3></td><td class='song_artist'>Phish</td><td class='song_date'>1998-11-20</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>  
<tr id='00021-03_Quinn_The_Eskimo' class='row-even'><td class='song_name'>Quinn the Eskimo<h3> (00:00)</h3></td><td class='song_artist'>Phish</td><td class='song_date'>1998-11-20</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>  

就像我說的，我有一個對<tr>的引用，但無法找到我正在尋找的<td> 。 我假設完整的參考看起來像： parent.firstChild.nextSibling.data但我總是遇到各種死胡同。 這里有 javascript 大師嗎？

Answer 1

你可以做：

var collection = document.getElementsByTagName( "td");
for( var i = 0; i < collection.length; ++i)
{
      if ( collection[i].getAttribute("class") === "whateveryouwant")
       {
       }
}

但我建議切換使用 javascript 框架，如 jquery，從那以后你唯一需要做的就是：

var element = $( "td.song_artist") //here you get all element you are looking for

Answer 2

在純 Javascript 中：

var elements = document.getElementsByClassName('song_artist')
for (var i=0; i<elements.length; i++){
    text = elements[i].innerHTML;
}

標准警告：改用 javascript 框架。