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

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

p.ej

Quiero obtener el código interno de meta

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

no funciona

Las identificaciones solo deben usarse cuando hay uno de esos elementos en la página, ya sea 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.

Se supone que la identificación es única.

Odio señalar lo obvio, pero en su ejemplo, obj1_Meta y obj2_Meta son identificaciones únicas, 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 un doble control, ¿pensaste demasiado esto?

Si no es así, fastidio …

Tan “malo” o “incorrecto” como su código es, una opción que funcionará es usar un marco de JavaScript como jQuery. Una vez que lo hayas incluido, puedes obtener elementos pasándole un selector de CSS (incluso uno semánticamente incorrecto) como:

 $('#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 $'s 

Los frameworks ahorran mucho tiempo y problemas con respecto a la compatibilidad del navegador, los métodos JavaScript “faltantes” (como getElementsByClassName) y la encoding de AJAX rápidamente. Estas cosas las hacen una buena idea para usar de todos modos.

Las identificaciones están destinadas a ser únicas, usan las clases de manera inteligente.

 
  • .obj = apunta a ambos elementos
  • #obj1.obj = apunta solo al primero
  • #obj1.obj_Meta = apunta obj1 DIV interno
  • #obj2.obj = apunta solo al segundo
  • #obj2.obj_Meta = apunta obj2 DIV interno

También puede tener problemas con este marcado porque la etiqueta “meta” solo es legal dentro de la etiqueta de cabecera, no la etiqueta del cuerpo. Por lo que puedo ver al ver Firebug, Firefox incluso irá tan lejos como para sacar esas tags 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.

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'); 

Dado que el atributo id es un identificador único para todo el documento, probablemente debería poner un espacio de nombre a sus id.

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