Get next/previous element using Javascript

How do I get the next element in html using javascript? Suppose I have three divs and I get a reference to one in js code, I want to get which is the next div and which is the previous.

From stackoverflow

• JQuery has a next() function, though i do not know how it is done in pure javascript

  Crescent Fresh : Come on. "jQuery has a xxx() function" is pretty much the answer to every dom related question on SO ;)

  Ólafur Waage : Whaat, i just woke up :o

• Well in pure javascript my thinking is that you would first have to collate them inside a collection.

  var divs = document.getElementsByTagName("div");
  //divs now contain each and every div element on the page
  var selectionDiv = document.getElementById("MySecondDiv");
  

  So basically with selectionDiv iterate through the collection to find its index, and then obviously -1 = previous +1 = next within bounds

  for(var i = 0; i < divs.length;i++)
  {
     if(divs[i] == selectionDiv)
     {
       var previous = divs[i - 1];
       var next = divs[i + 1];
     }
  }
  

  Please be aware though as I say that extra logic would be required to check that you are within the bounds i.e. you are not at the end or start of the collection.

  This also will mean that say you have a div which has a child div nested. The next div would not be a sibling but a child, So if you only want siblings on the same level as the target div then definately use nextSibling checking the tagName property.

  Amr ElGarhy : seams good solution but how to get the next element, as you wrote now i have the collection and the selected one, can you help me more?

  REA_ANDREW : Check my answer again as I posted some updates.

  Amr ElGarhy : Using Pure Javascript i see this is a good solution, but sure using JQuery things will be very simple, but i need to make it using pure js. Thanks

• Really depends on the overall structure of your document.

  If you have:

  <div></div>
  <div></div>
  <div></div>
  

  it may be as simple as traversing through using

  mydiv.nextSibling();
  mydiv.previousSibling();
  

  However, if the 'next' div could be anywhere in the document you'll need a more complex solution. You could try something using

  document.getElementsByTagName('div');
  

  and running through these to get where you want somehow.

  If you are doing lots of complex DOM traversing such as this I would recommend looking into a library such as jQuery.

• use the nextSibling and previousSibling properties:

  <div id="foo1"></div>
  <div id="foo2"></div>
  <div id="foo3"></div>
  
  document.getElementById('foo2').nextSibling; // #foo3
  document.getElementById('foo2').previousSibling; // #foo1
  

  However in some browsers (I forget which) you also need to check for whitespace and comment nodes:

  var div = document.getElementById('foo2');
  var nextSibling = div.nextSibling;
  while(nextSibling && nextSibling.nodeType != 1) {
      nextSibling = nextSibling.nextSibling
  }
  

  Libraries like jQuery handle all these cross-browser checks for you out of the box.

  thomasrutter : nextSibling and previousSibling (should) always return all nodes, not just element nodes shouldn't they? This includes text nodes, comment nodes, etc. Your second example looks like a good solution for this! Maybe you could cut down on the repetition with a do {} while(); loop? (edit: or recursion perhaps)