Faire référence à une div à l'intérieur d'une div avec le même identifiant qu'une autre à l'intérieur d'une autre

StackOverflow https://stackoverflow.com/questions/617450

Question

Comment puis-je faire référence à un div imbriqué par son identifiant lorsqu'il a le même identifiant qu'un div imbriqué dans un div portant le même nom

par exemple 

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

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

Je veux obtenir le innerHTML de la méta 

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

ne fonctionne pas

Était-ce utile?

La solution

Les identifiants ne doivent être utilisés que lorsqu'un élément de cet élément est présent sur la page, qu'il s'agisse d'un SPAN, d'un DIV ou autre. CLASS est ce que vous devriez utiliser lorsque vous pouvez avoir un élément répétitif.

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

Autres conseils

Un identifiant est censé être unique.

Je n'aime pas souligner l'évident, mais dans votre exemple, obj1_Meta et obj2_Meta sont des identifiants uniques, donc si c'est le cas dans votre code de travail: 

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

fonctionnerait comme décrit. En double contrôle, avez-vous pensé trop longtemps?

Si non, dommage ...

En tant que "mauvais" ou "faux" en tant que votre code, une option qui fonctionnera consiste à utiliser un framework JavaScript tel que jQuery. Une fois que vous l'avez inclus, vous pouvez obtenir des éléments en lui passant un sélecteur CSS (même un sémantiquement incorrect) comme suit: 

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

$ () est la façon dont jQuery dit document.getElementById () ... sur des stéroïdes. .html () est son équivalent de .innerHTML

D'autres frameworks, tels que PrototypeJS et MooTools, offrent également des fonctionnalités similaires.

Prototype par exemple: 

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


 Les frameworks permettent d'économiser beaucoup de temps et de problèmes en ce qui concerne la compatibilité du navigateur, " manquant " Méthodes JavaScript (comme getElementsByClassName) et codage AJAX rapidement. Ces choses en font une bonne idée à utiliser quand même. 
s

Les frameworks permettent d'économiser beaucoup de temps et de problèmes en ce qui concerne la compatibilité du navigateur, " manquant " Méthodes JavaScript (comme getElementsByClassName) et codage AJAX rapidement. Ces choses en font une bonne idée à utiliser quand même.

Les identifiants sont uniques, utilisez les classes intelligemment. 

<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 = vise la DIV interne obj1
  • # obj2.obj = ne cible que le second
  • # obj2.obj_Meta = vise la DIV interne obj2

Vous pouvez également rencontrer des problèmes avec ce balisage, car le "méta" La balise est uniquement légale à l'intérieur de la balise head, pas la balise body. Pour autant que je sache en regardant Firebug, Firefox ira même jusqu'à extraire ces balises méta du corps et les jeter dans la tête (et, dans ce cas, mettre tout contenu textuel à l'intérieur du div parent), vous ne les verrez donc pas du tout dans le DOM.

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

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

Ignorez simplement le faux identifiant de la division interne et obtenez-le par nom de balise. Vous devriez également pouvoir ignorer complètement la division interne, car getElementsByTagName effectue une recherche dans la totalité de la sous-arborescence: 

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

L'attribut id étant un identifiant unique pour l'ensemble du document, vous devez probablement utiliser un espace de nom pour 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')
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top