javascript节点next

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

1、JavaScript节点next是一个属性，它返回指定节点的下一个兄弟节点。在DOM树中，节点之间有父子、兄弟关系，next属性可以用来获取当前节点的下一个兄弟节点。

在下面的示例中，我们创建了一个简单的HTML文档结构，其中包含了一个父元素div和三个子元素p。我们首先获取到父元素div，然后使用next属性获取到第一个子元素p，即div的下一个兄弟节点。我们将获取到的节点的文本内容输出到控制台。


<!DOCTYPE html>
<html>
<body>
<div>
  <p>第一个子元素p</p>
  <p>第二个子元素p</p>
  <p>第三个子元素p</p>
</div>
<script>
var parentElement = document.querySelector('div');
var nextSibling = parentElement.nextElementSibling;
console.log(nextSibling.textContent);
</script>
</body>
</html>

在上面的示例中，我们使用了querySelector方法来获取到父元素div，然后使用nextElementSibling属性获取到了第一个子元素p。我们通过访问nextSibling的textContent属性，获取到了该节点的文本内容并输出到控制台。

需要注意的是，next属性只会返回下一个兄弟节点，如果没有下一个兄弟节点，它将返回null。如果我们想要获取所有的兄弟节点，可以使用nextSibling属性来遍历兄弟节点。下面的示例演示了如何使用nextSibling属性来获取所有兄弟节点，并将它们的文本内容输出到控制台。


<!DOCTYPE html>
<html>
<body>
<div>
  <p>第一个子元素p</p>
  <p>第二个子元素p</p>
  <p>第三个子元素p</p>
</div>
<script>
var parentElement = document.querySelector('div');
var sibling = parentElement.nextSibling;
while (sibling) {
  if (sibling.nodeType === 1) {
    console.log(sibling.textContent);
  }
  sibling = sibling.nextSibling;
}
</script>
</body>
</html>