Ссылка на div внутри div с таким же идентификатором, как у другого внутри другого

Question

Как я могу ссылаться на вложенный div по id, если он имеет тот же идентификатор, что и div, вложенный в div с аналогичным именем

например

<div id="obj1">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

Я хочу получить innerHTML мета

document.getElementById('obj1').getElementById('Meta').getElementsByTagName('meta')

не работает

Answer 1

Идентификаторы следует использовать только в том случае, если на странице есть один из этих элементов, будь то SPAN, DIV или любой другой. КЛАСС - это то, что вы должны использовать, когда у вас может быть повторяющийся элемент.

Код там не работает, потому что вы ссылаетесь на элемент с уникальным идентификатором, но у вас есть более одного на странице.

Answer 2

Идентификатор должен быть уникальным.

Answer 3

Не хочется указывать на очевидное, но в вашем примере obj1_Meta и obj2_Meta - это уникальные идентификаторы, так что если это так в вашем рабочем коде:

document.getElementById('obj1_Meta').getElementsByTagName('meta')[0].innerHTML;

будет работать как описано. Как двойная проверка, вы передумали это?

Если нет, то облом ...

Каким бы «плохим» или «неправильным» ни был ваш код, вариант, который будет работать, - это использовать JavaScript-фреймворк, такой как jQuery. После того, как вы включили его, вы можете получить элементы, передав ему селектор CSS (даже семантически неправильный), например, так:

$('#obj1 #obj1_Meta meta').html()

$ () - это способ jQuery сказать document.getElementById () ... на стероидах. .html () является его эквивалентом .innerHTML

Другие фреймворки, такие как PrototypeJS и MooTools, также предоставляют аналогичную функциональность.

Прототип, например:

$$('#obj1 #obj1_Meta meta').innerHTML;//note the double $'s

Фреймворки позволяют сэкономить много времени и усилий, связанных с совместимостью браузера, отсутствием методов JavaScript (таких как getElementsByClassName) и быстрым кодированием AJAX. Эти вещи делают их хорошей идеей для использования в любом случае.

Answer 4

ID должны быть уникальными, используйте классы разумно.

<div id="obj1" class="obj">
    <div id="obj1_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2" class="obj">
    <div id="obj2_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>

• .obj = нацеливается на оба элемента
• #obj1.obj = цели только первые
• #obj1.obj_Meta = цели obj1 inner DIV
• #obj2.obj = цели только второй
• #obj2.obj_Meta = цели obj2 внутренний DIV

Answer 5

Вы также можете столкнуться с проблемами с этой разметкой, потому что мета-тег допустим только внутри тега head, а не тега body. Насколько я могу судить по взгляду на Firebug, Firefox даже пойдет так далеко, что вытянет эти метатеги из тела и бросит их в голову (и, в этом случае, поместит любое текстовое содержимое в родительский div), так что вы их вообще не увидите в DOM.

Answer 6

Для HTML, который вы дали, это должно работать:

document.getElementById('obj1').getElementsByTagName('div')[0].getElementsByTagName('meta');

Просто проигнорируйте фиктивный идентификатор на внутреннем div и получите его по имени тега. Вы также должны иметь возможность полностью игнорировать внутренний div, так как getElementsByTagName ищет все поддерево:

document.getElementById('obj1').getElementsByTagName('meta');

Answer 7

Поскольку атрибут id является уникальным идентификатором всего документа, вам, вероятно, следует указать пространство имен для своих идентификаторов.

<div id="obj1">
    <div id="obj1_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="obj2_Meta">
        <meta></meta>
    </div>
</div>

document.getElementById('obj1_Meta').getElementsByTagName('meta')