проходя через идентификаторы в HTML

Question

У меня есть проблема. У меня есть два разных основных элемента div с одинаковыми элементами sub div.

когда я хочу получить таблицу как

table = document.getElementById('list_table');

Это дает мне данные первой таблицы Div, но я хочу получить информацию о второй таблице Div.

Может кто-нибудь, пожалуйста, помогите мне с этим. Я не могу изменить имена идентификаторов.

Спасибо

<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>

Answer 1

Вам следует избегать ситуаций с одинаковым идентификатором. Но если вы действительно ничего не можете с этим поделать, вот обходной путь:

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

Вернется

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

Answer 2

Глобальный атрибут id определяет уникальный идентификатор (ID), который должен быть уникальный во всем документе. источник

Используйте класс:

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