如何在html中使用js获取下一个节点？

Question

我有一个像这样的HTML

<table>
    <tr>
        <td>
            <img src="logo.png" onclick="getNextTableNode(this)">
        </td>
    </tr>
</table>
<table></table>

我可以使用js代码获取第一个tableNode

  function getNextTableNode(imgNode)
 { 
    tableNode1 = imgNode.parentNode.parentNode.parentNode;
 }

但是如何获得下一个tableNode？我不想使用id或name。我试过了：

tableNode2 = tableNode1.nextSibling;

但它不起作用。有人可以帮忙吗？先谢谢

Answer 1

浏览器向dom添加<tbody>节点，无论html中是否包含一个节点。您需要额外的.parentNode来获取表格元素。

获得表格元素后，请使用nextElementSibling：

tableNode2 = tableNode1.nextElementSibling;

使用nextSibling作为旧版浏览器的后备广告：

tableNode2 = tableNode1.nextElementSibling || tableNode1.nextSibling;

Answer 2

创建一些实用程序，用于通过标记名称获取祖先和兄弟：

function closestParent(node, tag) {
    tag = (tag + "").toUpperCase();
    while (node && (node = node.parentNode) && node.nodeName !== tag)
       ;
    return node;
}
function nextSibling(node, tag) { 
    tag = (tag + "").toUpperCase();
    while (node && (node = node.nextSibling) && node.nodeName !== tag)
        ;
    return node;
}

---

然后使用这样的实用程序：

function getNextTableNode(node) {
    return nextSibling(closestParent(node, "table"), "table");
}

这提供了非常广泛的浏览器兼容性。