En se référant à un div à l'intérieur d'un div avec le même identifiant que l'autre à l'intérieur d'un autre

Les identifiants ne doivent être utilisés que s'il existe un de ces éléments sur la page, que ce soit un SPAN, DIV ou autre. La CLASSE est ce que vous devriez utiliser lorsque vous pourriez avoir un élément répétitif.

Le code ne fonctionne pas car vous faites référence à un élément par ID unique, mais avez plus d'un sur la page.

L'ID est censé être unique.

Otez pour souligner l'évidence, mais dans votre exemple, obj1_Meta et obj2_Meta sont des identifiants uniques, alors, si c'est le cas dans votre code de travail:

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

Fonctionnerait comme décrit. En double vérification, avez-vous réfléchi?

Sinon, bummer …

En tant que «mauvais» ou «faux» que votre code, une option qui fonctionnera est d'utiliser un framework JavaScript comme jQuery. Une fois que vous l'avez inclus, vous pouvez obtenir des éléments en le transmettant un sélecteur CSS (même un sémantiquement incorrect) comme tel:

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

$ () Est la manière de jQuery de dire document.getElementById () … sur les stéroïdes. .html () est son équivalent de .innerHTML

D'autres cadres, comme PrototypeJS et MooTools, offrent également des fonctionnalités similaires.

Prototype par exemple:

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

Les frameworks enregistrent beaucoup de temps et de problèmes en ce qui concerne la compatibilité du navigateur, les méthodes "manquantes" JavaScript (comme getElementsByClassName) et le codage AJAX rapidement. Ces choses les rendent une bonne idée d'utiliser de toute façon.

Vous pouvez également rencontrer des problèmes avec ce marquage parce que la balise "méta" est uniquement légal dans la balise de tête, et non sur la balise de corps. Pour autant que je puisse le savoir en regardant Firebug, Firefox va même jusqu'à retirer ces méta-tags du corps et les jeter dans la tête (et, dans ce cas, mettre tout contenu de texte dans la division parent) Donc vous ne les verrez pas dans les DOM.

Les ID sont censés être uniques, utiliser des classes de manière intelligente.

 <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 = cible les deux éléments
• #obj1.obj = cible uniquement le premier
• #obj1.obj_Meta = cible obj1 DIV interne
• #obj2.obj = cible uniquement le second
• #obj2.obj_Meta = cible obj2 DIV interne

Pour le HTML que vous avez donné, cela devrait fonctionner:

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

Il suffit d'ignorer l'identifiant faux sur la div interne et de l'obtenir par nom de balise. Vous devriez également pouvoir ignorer complètement la div interne, car getElementsByTagName recherche tout le sous-arbre:

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

Étant donné que l'attribut id est un identifiant unique à l'échelle du document, vous devez probablement renvoyer vos identifiants.

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