Suppose to have the following:

<div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
</div>

Ok. This html piece is placed somewhere in the code... I must collect all tags having the element id.

How can I achieve this in javascript?

getElementById allows me to retrieve only one element...

Furthermore I cannot give you other hypothesis... I mean I cannot rely on class parameter and on name parameter (I mean they all are divs, so...).

Thank you

Suppose to have the following:

<div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
   <div id="element"></div>
</div>

Ok. This html piece is placed somewhere in the code... I must collect all tags having the element id.

How can I achieve this in javascript?

getElementById allows me to retrieve only one element...

Furthermore I cannot give you other hypothesis... I mean I cannot rely on class parameter and on name parameter (I mean they all are divs, so...).

Thank you

• javascript
• dom
• xhtml

• Just for the information... id's should be unique – BvdVen Commented Jan 20, 2011 at 15:26
• 5 Not only should "id" values be unique, they must be unique. Don't upset The Force. – Pointy Commented Jan 20, 2011 at 15:26
• 1 To my knowledge id attribute should be unique and you won't be able to achieve what you want without having to work around it... Is it the exact html or is there different divs in the same container? Can you post a bigger sample of your html? – Damp Commented Jan 20, 2011 at 15:27
• 2 The purpose of the id attribute is to UNIQUELY identify ONE element. By giving multiple elements the same id it destroys this purpose. If the reason behind giving multiple elements the same id is for CSS styling then consider giving them the same class and use javascript to find elements with the same class. I don't think javascript is able to find multiple elements with the same id. – Bazzz Commented Jan 20, 2011 at 15:29
• OKOK sorry for being late... YES id is supposed to be unique but it is also usable for styling elements... a class should be used instead but this is not a project of mine... that's why I have this situation to deal with. – Andry Commented Jan 20, 2011 at 17:53

7 Answers 7

It's invalid to have more than one element with the same ID -- you should rethink your design so that you can assign unique IDs to each DIV.

If you still want to do it (but please don't), you can assign the outer DIV an ID and get a list of all children DIV like this:

var list = document.getElementById('outerDiv').getElementsByTagName('div');

You can get all the divs like this

var alDivs = document.getElementById("element").parentNode.getElementsByTagName("div");

Note : You also give same name to each checkbox like name='element' then try this javascript code

var totalCheckBoxes=document.getElementsByName("element");
/*totalCheckBoxes is the array of all check boxes so implement further functionality upon 

it*/

http://rkj2me.blogspot./

If you must, try something like this (with jQuery) $("div[id='element']") but you really should try avoiding using the same id for more than one element on a page.

A quick example confirms this works with jQuery 1.4.4: jsFiddle, but again, this is not a good design by any means.

If you are facing something like this:

<div id="a">
   <div id="element">1</div>       
</div>

<div id="b">
   <div id="element">2</div>       
</div>

and you want to access data in <div id="element">2</div>, then use $("#b #element").html(); through jquery.

it seems like YOU CAN get all elements with same id, example:

<!-- the HTML: -->

<div id="div_lala" style="background-color:#FFFFFF;">
 some content 1111
</div>

<div id="div_lala" style="background-color:#FFFFFF;">
 some content 2222
</div>

then an example with JS to do something to them,like changin their background =)

function printElements() {

  bgcolors=new Array("#0066FF","#FF9900")

  elementCount = document.all("div_lala").length; //this will count all elements with the same name =)
  alert('there are: '+ elementCount + 'elements =)' ) //just to know how many elements

  for (i=0; i<elementCount; i++) {

        document.all("div_lala",i).style.background = bgcolors[i]; //we change the color of each element according to the ones in the array
  }
}

source for the idea: http://www.webreference./js/tips/000921.html

Hope that helps =)

As stated by everyone, having multiple elements with same id is a bad design and one should try to avoid such scenarios as much as possible. If still there is a need and you gotta really save the earth from alien invasion, then you can make use of querySelectorAll function that returns all element with same attribute value in an array as following:

<div id="element"></div>
   <div id="element">A</div>
   <div id="element">B</div>
   <div id="element">C</div>
   <div id="element">D</div>
   <div id="element">E</div>
   <div id="element">F</div>
</div>
<script type='text/javascript'>
 var result = document.querySelectorAll("#element");
/*
 result[0] points to <div id="element">A</div>
 result[1] points to <div id="element">B</div>
 result[2] points to <div id="element">C</div>
 result[3] points to <div id="element">D</div>
 result[4] points to <div id="element">E</div>
 result[5] points to <div id="element">F</div> 
*/
</script>

Now that you can access array index uniquely, you can access elements with same id (in this case) uniquely!