travesing through ids in Html

Question

I have an issue. I have two different main div elements with same sub div elements.

when i want to get table like

table = document.getElementById('list_table');

THis is giving me 1st div table data but i want second div table info.

Can anyone please help me with this. I can not change id names.

Thank you

<div id="container_1">
    <div id="my_table">
        <table id = "list_table"> 
        </table        
    </div>
</div>

<div id="container_2">
    <div id="my_table">
        <table id = "list_table"> 
        </table        
    </div>
</div>

Well, the error is obvious: you should not have multiple elements with the same ID. That's invalid HTML — Nico Haase, Jun 28 '18 at 12:11
I would also like to point out that it is `.getElementById()`, not `getElementsById()`. The function should only ever return a single element. An `id` is meant to uniquely identify a single element. If you want to identify a group, you can use things like their classes, names, or tags. — TheCrzyMan, Jun 28 '18 at 12:25
Possible duplicate of [JavaScript and getElementById for multiple elements with the same ID](https://stackoverflow.com/questions/3607291/javascript-and-getelementbyid-for-multiple-elements-with-the-same-id) — Liam, Jun 28 '18 at 12:26

score 5 · Answer 1 · answered Jun 28 '18 at 12:19

5

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. source

Use class:

table = document.getElementsByClassName('list_table')[1];

answered Jun 28 '18 at 12:19

Nick

3,691
18
36

score -1 · Answer 2 · answered Jun 28 '18 at 12:24

-1

You should avoid situations with same id. But If you realy can do nothing about it here is workaround:

table = document.querySelectorAll('#list_table');

Will return

NodeList(2) [table#list_table, table#list_table]
0:table#list_table
1:table#list_table

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

answered Jun 28 '18 at 12:24

Volod

1,283
2
15
34

There is no workaround for this. The markup is invalid and won't be parsed correctly – Liam Jun 28 '18 at 12:25
1

Before posting answer I created a fiddle - https://jsfiddle.net/7Lwmtey3/1/ - to check it. And it's work. – Volod Jun 28 '18 at 12:26
[This attribute assigns a name to an element. This name must be unique in a document.](https://www.w3.org/TR/html401/struct/global.html#h-7.5.2). You cannot guarentee if this will work or not. Different browsers can and will implement this differently because it's breaking the W3C standards. This might "work" but it shouldn't. The underlying issue is that Id's **must** be unique – Liam Jun 28 '18 at 12:28
I'm not saing that someone must use same ids. – Volod Jun 28 '18 at 12:28
Have you read question? I'm asking becouse of "I can not change id names." in it. – Volod Jun 28 '18 at 12:33
Would something like `*[id=list_table]` work? Not sure if browsers handle this differently compared to #list_table and also not sure about what the spec says. The hope is that the attribute selector treats the id attribute like any other attribute without considering its special role as a unique identifier. – pschichtel Jun 28 '18 at 12:53
@pschichtel yes document.querySelectorAll('*[id=list_table]') works too (in Chrome at least) – Volod Jun 29 '18 at 08:12

travesing through ids in Html

2 Answers2