Unter Bezugnahme auf ein div in einem div mit der gleichen ID wie ein anderes in einem anderen

Question

Wie kann ich auf eine verschachtelte div von id beziehen, wenn sie die gleiche ID wie ein div in einem ähnlich benannten div verschachtelt hat

zB

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

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

Ich möchte die Innerhtml von meta bekommen

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

funktioniert nicht

Answer 1

IDs sollten nur verwendet werden, wenn es einen von diesem Element auf der Seite ist, sei es ein SPAN, DIV oder was auch immer. CLASS ist, was Sie sollten für verwenden, wenn Sie ein sich wiederholendes Element haben.

-Code gibt es nicht funktioniert, weil Sie durch eindeutige ID auf ein Element sich beziehen, aber mehr als eine auf der Seite.

Answer 2

Id sollte eindeutig sein.

Answer 3

Hass, das Offensichtliche zu betonen, aber in Ihrem Beispiel obj1_Meta und obj2_Meta sind einzigartig ids, also wenn es der Fall in Ihrem Arbeits Code ist:

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

würde wie beschrieben funktionieren. Als überprüfen, haben Sie gedacht, über das?

Wenn nicht, enttäuschung ...

Als „schlecht“ oder „falsch“ als Code ist, eine Option, die ein JavaScript-Frameworks wie jQuery verwendet arbeiten ist. Sobald Sie es aufgenommen haben, können Sie Elemente erhalten, indem es einen CSS-Selektor (auch eine semantisch falschen) wie so übergeben:

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

$ () ist der Weg der jQuery sagen document.getElementById () ... auf Steroiden. .html () ist dessen Äquivalent von .innerHTML

Andere Gerüste, wie PrototypeJS und MooTools auch eine ähnliche Funktionalität bieten.

Prototyp zum Beispiel:

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

Frameworks sparen viel Zeit und Mühe in Bezug auf Browser-Kompatibilität, „fehlende“ JavaScript-Methoden (wie getElementsByClassName) und schnell AJAX-Codierung. Diese Dinge machen sie eine gute Idee zu verwenden sowieso.

Answer 4

IDs soll eindeutig sein, Nutzungsklassen intelligent.

<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 = Ziele beider Elemente
• #obj1.obj = Ziele nur der erste
• #obj1.obj_Meta = Ziele Obj1 innere DIV
• #obj2.obj = Ziele nur die zweite
• #obj2.obj_Meta = Ziele Obj2 innere DIV

Answer 5

Sie können auch Probleme mit diesem Markup ausgeführt werden, da der „Meta“ Tag nur legal im Kopf-Tag ist, nicht den Body-Tag. Soweit ich aus der Betrachtung Firebug sagen kann, wird Firefox gehen sogar so weit, diese Meta-Tags aus dem Körper zu ziehen und sie in den Kopf werfen (und in diesem Fall innerhalb der übergeordneten div beliebigen Textinhalt setzen), so dass Sie sie nicht in dem DOM sehen überhaupt.

Answer 6

Für die HTML Sie gegeben haben, sollte diese Arbeit:

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

ignorieren einfach die falsche ID auf der inneren div und es von Tag-Namen bekommen. Sie sollten auch in der Lage sein, den inneren div vollständig zu ignorieren, da getElementsByTagName den gesamten Teilbaum sucht:

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

Answer 7

Wie das id-Attribut eine einzigartige Dokument weite Kennung ist, sollten Sie wahrscheinlich Ihre ids Namespace.

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