javascript获取dom的下一个节点方法

当我们需要获取一个DOM元素的下一个兄弟节点时，有以下两个方法：

方法一：使用nextSibling属性

DOM节点对象拥有一个nextSibling属性，该属性用于获取当前节点的下一个兄弟节点。需要注意的是，这个属性获取到的兄弟节点可能是文本节点、注释节点等。

// 获取 id 为 "test" 的元素的下一个兄弟节点
var test = document.getElementById("test");
var nextSibling = test.nextSibling;

上面的代码中，我们先使用getElementById方法获取到id为"test"的元素，再使用nextSibling属性获取到其下一个兄弟节点。如果我们希望获取下一个元素节点，则可以循环获取下一个节点，直到找到元素节点为止。

// 获取 id 为 "test" 的元素的下一个元素节点
var test = document.getElementById("test");
var nextSibling = test.nextSibling;
while (nextSibling && nextSibling.nodeType !== 1) {
  nextSibling = nextSibling.nextSibling;
}

上面的代码中，在获取到下一个节点后，我们判断其节点类型是否为元素节点（nodeType = 1），如果不是则继续向下获取下一个节点，直到找到为止。

方法二：使用nextElementSibling属性

如果我们确保下一个节点是元素节点，我们也可以使用nextElementSibling属性来获取到这个节点，该属性仅仅会查找元素节点。

// 获取 id 为 "test" 的元素的下一个元素节点
var test = document.getElementById("test");
var nextElementSibling = test.nextElementSibling;

上面的代码中，我们直接使用nextElementSibling属性获取到id为"test"的元素的下一个元素节点。

综上，当我们需要获取一个DOM元素的下一个兄弟节点时，可以使用两种方法：nextSibling属性和nextElementSibling属性。其中，nextSibling属性还需要判断节点类型是否为元素节点。