使用JavaScript获取下一个/上一个元素？

Question

如何使用JavaScript获取HTML中的下一个元素？假设我有3个，<div>并且在JavaScript代码中获得了对1的引用，我想获得下一个<div>，前一个。

Answer 1

在纯JavaScript中，我的想法是，您首先必须将它们归类到一个集合中。

var divs = document.getElementsByTagName("div");

//divs now contain each and every div element on the page

var selectionDiv = document.getElementById("MySecondDiv");

因此，基本上，使用selectionDiv遍历集合以查找其索引，然后显然是-1 =上一个+1 =下一个在范围内

for(var i = 0; i < divs.length;i++)

{

   if(divs[i] == selectionDiv)

   {

     var previous = divs[i - 1];

     var next = divs[i + 1];

   }

}

但是请注意，正如我所说的那样，将需要额外的逻辑来检查您是否在范围之内，即您不在集合的末尾还是开始。

这也意味着您拥有一个嵌套有子div的div。下一个div不会是兄弟姐妹，而是孩子。因此，如果您只希望与目标div处于同一级别的兄弟姐妹，则必须使用nextSibling检查tagName属性。

Answer 2

使用nextSibling和previousSibling属性：

<div id="foo1"></div>

<div id="foo2"></div>

<div id="foo3"></div>

document.getElementById('foo2').nextSibling; // #foo3

document.getElementById('foo2').previousSibling; // #foo1

但是，在某些浏览器（我忘记了哪种浏览器）中，您还需要检查空格和注释节点：

var div = document.getElementById('foo2');

var nextSibling = div.nextSibling;

while(nextSibling && nextSibling.nodeType != 1) {

    nextSibling = nextSibling.nextSibling

}

像jQuery这样的库为您提供了所有这些跨浏览器检查功能。

Answer 3

确实取决于您文档的整体结构。

如果你有：

<div></div>

<div></div>

<div></div>

它可能和使用遍历一样简单

mydiv.nextSibling;

mydiv.previousSibling;

但是，如果“下一个” div可以在文档中的任何位置，则需要更复杂的解决方案。您可以尝试使用

document.getElementsByTagName("div");

然后遍历这些，以某种方式到达您想要的地方。

如果您要进行许多此类的复杂DOM遍历，则建议您查看jQuery之类的库。