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

Question

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

например

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

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

Я хочу получить innerHTML из meta

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

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

<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 внутренний DIV
• #obj2.obj = нацелен только на второй
• #obj2.obj_Meta = цели obj2 внутренний DIV

Answer 5

Вы также можете столкнуться с проблемами с этой разметкой, поскольку тег "meta" разрешен только внутри тега head, а не основного тега.Насколько я могу судить, глядя на Firebug, Firefox даже зайдет так далеко, что вытащит эти мета-теги из тела и перенесет их в head (и, в данном случае, поместит любое текстовое содержимое внутрь родительского 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')