Refiriéndose a un div dentro de un div con la misma ID que otro dentro de otro

Question

¿Cómo puedo referirme a un div anidado por id cuando tiene el mismo id que un div anidado en un div de nombre similar?

por ejemplo

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

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

Quiero obtener el HTML interno de meta

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

no funciona

Answer 1

Las identificaciones solo deben usarse cuando hay uno de esos elementos en la página, ya sea un SPAN, DIV o lo que sea. CLASE es lo que debe usar para cuando puede tener un elemento que se repite.

El código allí no funciona porque te refieres a un elemento por ID único, pero tienes más de uno en la página.

Answer 2

Se supone que la identificación es única.

Answer 3

Odio señalar lo obvio, pero en su ejemplo, obj1_Meta y obj2_Meta son identificadores únicos, así que si es el caso en su código de trabajo:

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

funcionaría como se describe. Como una doble verificación, ¿pensaste demasiado en esto?

Si no, bummer ...

Como " mal " o " incorrecto " Como es su código, una opción que funcionará es usar un marco de JavaScript como jQuery. Una vez que lo hayas incluido, puedes obtener elementos pasándolos a un selector de CSS (incluso uno semánticamente incorrecto) así:

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

$ () es la forma jQuery de decir document.getElementById () ... en los esteroides. .html () es su equivalente de .innerHTML

Otros marcos, como PrototypeJS y MooTools también proporcionan una funcionalidad similar.

Prototipo por ejemplo:

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

 Los marcos ahorran mucho tiempo y problemas con respecto a la compatibilidad del navegador, " faltan " Métodos de JavaScript (como getElementsByClassName) y codificación AJAX rápidamente. Estas cosas las hacen una buena idea para usar de todos modos. 
s

Los marcos ahorran mucho tiempo y problemas con respecto a la compatibilidad del navegador, " faltan " Métodos de JavaScript (como getElementsByClassName) y codificación AJAX rápidamente. Estas cosas las hacen una buena idea para usar de todos modos.

Answer 4

Las identificaciones están diseñadas para ser únicas, use las clases de manera inteligente.

<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 = apunta a ambos elementos
• # obj1.obj = solo se enfoca en el primero
• # obj1.obj_Meta = apunta obj1 DIV interno
• # obj2.obj = apunta solo al segundo
• # obj2.obj_Meta = apunta obj2 DIV interno

Answer 5

También puede tener problemas con este marcado porque el " meta " La etiqueta solo es legal dentro de la etiqueta de la cabeza, no la etiqueta del cuerpo. Por lo que puedo ver al ver Firebug, Firefox incluso irá tan lejos como para sacar esas etiquetas meta del cuerpo y tirarlas en la cabeza (y, en este caso, poner cualquier contenido de texto dentro del div padre), para que no los veas en el DOM en absoluto.

Answer 6

Para el HTML que has dado, esto debería funcionar:

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

Simplemente ignora la identificación falsa en la división interna y obténgala por nombre de etiqueta. También deberías poder ignorar completamente la división interna, ya que getElementsByTagName busca en todo el subárbol:

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

Answer 7

Dado que el atributo id es un identificador único para todo el documento, probablemente deberías poner un espacio de nombre a tus 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')