Get multiple elements by Id

Question

I have a page with anchor tags throughout the body like this    lt a id  test  name  Name 1  gt  lt  a gt   lt a id  test  name  Name 2  gt  lt  a gt   lt a id  test  name  Name 3  gt  lt  a gt    The ID is always the same but the name changes   I need to populate a list of the names of these anchor tags  for example  Name 1  Name 2  Name 3  This is where I ve got to so far   document write document getElementById  readme   name     This writes out the name of the first anchor tag  I m in need of a way to get multiple elements by Id     Any help is greatly appreciated

User · Answer

Use jquery multiple selector    lt  doctype html gt   lt html lang  en  gt   lt head gt   lt meta charset  utf-8  gt   lt title gt multiple demo lt  title gt   lt style gt  div span p   width  126px  height  60px  float left  padding  3px  margin  2px  background-color   EEEEEE  font-size 14px     lt  style gt   lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt  head gt   lt body gt   lt div gt div lt  div gt   lt p class  myClass  gt p class  myClass  lt  p gt   lt p class  notMyClass  gt p class  notMyClass  lt  p gt   lt span gt span lt  span gt   lt script gt    div span p myClass   css  border   3px solid red    lt  script gt   lt  body gt   lt  html gt    Link   http   api jquery com multiple-selector   selector should like this       id1  id2  id3

User · Answer

More than one Element with the same ID is not allowed  getElementById Returns the Element whose ID is given by elementId  If no such element exists  returns null  Behavior is not defined if more than one element has this ID

User · Answer

You can t have duplicate ids  Ids are supposed to be unique  You might want to use a specialized class instead

User · Answer

You can get the multiple element by id by identifying what element it is  For example   lt div id  id  gt  lt  div gt   lt div id  id  gt  lt  div gt   lt div id  id  gt  lt  div gt    I assume if you are using jQuery you can select all them all by         div id       This will get you array of elements you loop them based on your logic

User · Answer

With querySelectorAll you can select the elements you want without the same id using css selector   var elems   document querySelectorAll   id1   id1   id3

User · Answer

If you re not religious about keeping your HTML valid then I can see use cases where having the same ID on multiple elements may be useful    One example is testing  Often we identify elements to test against by finding all elements with a particular class  However  if we find ourselves adding classes purely for testing purposes  then I would contend that that s wrong  Classes are for styling  not identification    If IDs are for identification  why must it be that only one element can have a particular identifier  Particularly in today s frontend world  with reusable components  if we don t want to use classes for identification  then we need to use IDs  But  if we use multiples of a component  we ll have multiple elements with the same ID   I m saying that s OK  If that s anathema to you  that s fine  I understand your view  Let s agree to disagree and move on    If you want a solution that actually finds all IDs of the same name though  then it s this   function getElementsById id        const elementsWithId          const allElements   document getElementsByTagName          for let key in allElements            if allElements hasOwnProperty key                 const element   allElements key              if element id     id                    elementsWithId push element                                            return elementsWithId     EDIT  ES6 FTW   function getElementsById id        return     document getElementsByTagName       filter element   gt  element id     id

User · Answer

If you can change the markup  you might want to use class instead    lt  -- html -- gt   lt a class  test  name  Name 1  gt  lt  a gt   lt a class  test  name  Name 2  gt  lt  a gt   lt a class  test  name  Name 3  gt  lt  a gt      javascript var elements   document getElementsByClassName  test    var names       for var i 0  i lt elements length  i          names    elements i  name    document write names     jsfiddle demo

User · Answer

As oppose to what others might say  using the same Id for multiple elements will not stop the page from being loaded  but when trying to select an element by Id  the only element returned is the first element with the id specified  Not to mention using the same id is not even valid HTML   That being so  never use duplicate id attributes  If you are thinking you need to  then you are looking for class instead  For example    lt div id  div1  class  mydiv  gt Content here lt  div gt   lt div id  div2  class  mydiv  gt Content here lt  div gt   lt div id  div3  class  mydiv  gt Content here lt  div gt    Notice how each given element has a different id  but the same class  As oppose to what you did above  this is legal HTML syntax  Any CSS styles you use for   mydiv   the dot means class  will correctly work for each individual element with the same class   With a little help from Snipplr  you may use this to get every element by specifiying a certain class name   function getAllByClass classname  node         if   document getElementsByClassName            if   node                node    document body                     var a                   re   new RegExp    b    classname      b                els   node getElementsByTagName                for  var i   0  j   els length  i  lt  j  i                  if  re test els i  className                     a push els i                                  else           return document getElementsByClassName classname              return a      The above script will return an Array  so make sure you adjust properly for that

User · Answer

You should use querySelectorAll  this writes every occurrence in an array and it allows you to use forEach to get individual element   document querySelectorAll   id test    forEach element  gt       document write element

User · Answer

An  id  Specifies a unique id for an element  amp  a class Specifies one or more classnames for an element   So its better to use  Class  instead of  id

User · Answer

Here is a function I came up with  function getElementsById elementID       var elementCollection   new Array        var allElements   document getElementsByTagName           for i   0  i  lt  allElements length  i             if allElements i  id    elementID              elementCollection push allElements i               return elementCollection      Apparently there is a convention supported by prototype  and probably other major JavaScript libraries      However  I have come to discover that dollar sign function has become   the more-or-less de facto shortcut to document getElementById    Let   s   face it  we all use document getElementById   a lot  Not only does it   take time to type  but it adds bytes to your code as well    here is the function from prototype   function   element      if  arguments length  gt  1        for  var i   0  elements       length   arguments length  i  lt  length  i          elements push   arguments i         return elements        if  Object isString element       element   document getElementById element     return Element extend element        Source

User · Answer

Below is the work around to submit Multi values  in case of converting the application from ASP to PHP   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt   lt HTML gt   lt HEAD gt   lt TITLE gt  New Document  lt  TITLE gt   lt META NAME  Generator  CONTENT  EditPlus  gt   lt META NAME  Author  CONTENT    gt   lt META NAME  Keywords  CONTENT    gt   lt META NAME  Description  CONTENT    gt   lt  HEAD gt   lt script language  javascript  gt  function SetValuesOfSameElements         var Arr Elements           Arr Elements   document getElementsByClassName  MultiElements         for var i 0  i lt Arr Elements length  i              Arr Elements i  value               var Element Name   Arr Elements i  name          var Main Element Type   Arr Elements i  getAttribute  MainElementType            var Multi Elements               Multi Elements   document getElementsByName Element Name           var Multi Elements Values         alert Element Name      gt      Main Element Type      gt      Multi Elements Values           if  Main Element Type     CheckBox                 for var j 0  j lt Multi Elements length  j                      if  Multi Elements j  checked    true                        if  Multi Elements Values                                  Multi Elements Values   Multi Elements j  value                                            else                           Multi Elements Values          Multi Elements j  value                                                                          if  Main Element Type     Hidden     Main Element Type     TextBox                 for var j 0  j lt Multi Elements length  j                      if  Multi Elements Values                              Multi Elements Values   Multi Elements j  value                                    else                       if  Multi Elements j  value                                  Multi Elements Values          Multi Elements j  value                                                                          Arr Elements i  value   Multi Elements Values            lt  script gt   lt BODY gt   lt form name  Training  action  TestCB php  method  get  onsubmit  SetValuesOfSameElements     gt       lt table gt            lt tr gt               lt td gt Check Box lt  td gt               lt td gt                   lt input type  CheckBox  name  TestCB  id  TestCB  value  123  gt 123 lt  input gt                   lt input type  CheckBox  name  TestCB  id  TestCB  value  234  gt 234 lt  input gt                   lt input type  CheckBox  name  TestCB  id  TestCB  value  345  gt 345 lt  input gt               lt  td gt               lt td gt                   lt input type  hidden  name  SdPart  id  SdPart  value  1231  gt  lt  input gt                   lt input type  hidden  name  SdPart  id  SdPart  value  2341  gt  lt  input gt                   lt input type  hidden  name  SdPart  id  SdPart  value  3451  gt  lt  input gt                    lt input type  textbox  name  Test11  id  Test11  value  345111  gt  lt  input gt                    lt  -- Define hidden Elements with Class name  MultiElements  for all the Form Elements that used the Same Name  Check Boxes  Multi Select  Text Elements with the Same Name  Hidden Elements with the Same Name  etc                  -- gt                   lt input type  hidden  MainElementType  CheckBox  name  TestCB  class  MultiElements  value    gt  lt  input gt                   lt input type  hidden  MainElementType  Hidden  name  SdPart  class  MultiElements  value    gt  lt  input gt                   lt input type  hidden  MainElementType  TextBox  name  Test11  class  MultiElements  value    gt  lt  input gt               lt  td gt           lt  tr gt           lt tr gt               lt td colspan  2  gt                   lt input type  Submit  name  Submit  id  Submit  value  Submit    gt               lt  td gt           lt  tr gt       lt  table gt   lt  form gt    lt  BODY gt   lt  HTML gt    testCB php    lt  php echo   GET  TestCB    echo   lt br  gt    echo   GET  SdPart    echo   lt br  gt    echo   GET  Test11      gt

User · Answer

Today you can select elements with the same id attribute this way   document querySelectorAll   id test       Or this way with jQuery       id test       CSS selector  test         should work also for all elements with id    test    ut the only thing  document querySelectorAll   test    or     test     - will return only a first element with this id   Is it good  or not - I can t tell   But sometimes it is difficult to follow unique id standart     For example you have the comment widget  with HTML-ids  and JS-code  working with these HTML-ids  Sooner or later you ll need to render this widget many times  to comment a different objects into a single page  and here the standart will broken  often there is no time or not allow - to rewrite built-in code

[javascript] Get multiple elements by Id

Examples related to javascript

Examples related to html

Examples related to elements