Geting reference to many elements having the same id using Javascript

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

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.com/

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.com/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!