獲取下一個兄弟父節點的子節點不工作的JavaScript DOM

Question

我有這塊HTML代碼。

<tbody> 
    <tr> 
    <td><a href='/some/link' class="image"> ... </a></td> 
    <td><a href="/some/link2" title="foo"> SOME TEXT </a></td> 
    </tr> 
    <tr> 
    <td> some td node that appears randomly </td> 
    <td><a href='/some/link' class="image"> ... </a></td> 
    <td><a href="/some/link2" title="foo"> SOME TEXT </a></td> 
    </tr> 
</tbody> 

我想要得到的<td>元素是<td>元素與class="image"的nextSibling。欣賞某人能幫助我。我的代碼如下給我不明確。謝謝。

下面，我打電話與class="image"節點的parentElement並指示去nextSibling節點，並獲得特定節點的childNode，最後得到的文本。我不明白爲什麼它不起作用。

var nodes = document.querySelectorAll('tbody > tr > td > a.image'); 
return Array.prototype.map.call(nodes, function(e) { 
    return e.parentElement.nextSibling.childNodes[1].a.innerText; 
} 

網站網址：https://en.wikipedia.org/wiki/List_of_Nobel_Peace_Prize_laureates

Screenshot of HTML

我打算搶在諾貝爾獎得主的所有名稱。

Answer 1

下面的工作

Array.prototype.map.call(nodes, function(e) { 
    return e.parentElement.nextElementSibling.childNodes[1].innerText; 
}) 

編輯：

根據所給出的wiki鏈接，我們可以做到以不同的方式，如下面其中的一種。

假設每個tr將包含名稱

var trs = document.querySelectorAll('.wikitable tr');// 'tbody > tr > td > a.image' will give a.image inside single tr also which may fail 

Array.prototype.reduce.call(trs,function(result,tr){ 
var e = tr.querySelector('td .image') 
if(e && e.parentElement.nextElementSibling) 
    result.push(e.parentElement.nextElementSibling.querySelector('a').innerText); 
    return result; 
},[])