获取下一个不工作Javascript DOM的同级父节点的子节点

Get Child Node of next Sibling Parent Node NOT Working Javascript DOM

本文关键字：父节点 子节点 DOM 下一个 工作 Javascript 获取      更新时间：2023-11-15

我有这段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"的下一个绑定。感谢有人能帮助我。我下面的代码给了我未定义的信息。非常感谢。

下面，我用class="image"调用了节点的parentElement，并指示它转到下一个Sibling节点，得到该特定节点的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;
}

网站Url:https://en.wikipedia.org/wiki/List_of_Nobel_Peace_Prize_laureates

HTML 屏幕截图

我打算把所有诺贝尔奖获得者的名字都拿出来。

以下内容将适用于

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;
},[])
相关文章：