Facendo riferimento a un div all'interno di un div con lo stesso ID di un altro all'interno di un altro

Question

Come posso fare riferimento a un div nidificato per ID quando ha lo stesso ID di un div nidificato in un div con nome simile

es

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

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

Voglio ottenere il HTML interno di meta

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

non funziona

Answer 1

Gli ID devono essere utilizzati solo quando nella pagina è presente uno di questi elementi, sia esso SPAN, DIV o altro. CLASS è ciò che dovresti usare quando potresti avere un elemento ripetitivo.

Il codice non funziona perché ti riferisci a un elemento con ID univoco, ma ne hai più di uno nella pagina.

Answer 2

L'ID dovrebbe essere unico.

Answer 3

Odio sottolineare l'ovvio, ma nel tuo esempio obj1_Meta e obj2_Meta sono ID univoci, quindi se è il caso nel tuo codice di lavoro:

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

funzionerebbe come descritto. Come doppio controllo, ci hai pensato?

In caso contrario, bummer ...

Come " cattivo " o "errato" come è il tuo codice, un'opzione che funzionerà è quella di utilizzare un framework JavaScript come jQuery. Dopo averlo incluso, puoi ottenere elementi passandogli un selettore CSS (anche semanticamente errato) in questo modo:

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

$ () è il modo di jQuery di dire document.getElementById () ... sugli steroidi. .html () è l'equivalente di .innerHTML

Anche altri framework, come PrototypeJS e MooTools, forniscono funzionalità simili.

Prototipo ad esempio:

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

 I framework risparmiano molto tempo e problemi per quanto riguarda la compatibilità del browser, "manca". Metodi JavaScript (come getElementsByClassName) e codifica AJAX rapidamente. Queste cose li rendono una buona idea da usare comunque. 
s

I framework risparmiano molto tempo e problemi per quanto riguarda la compatibilità del browser, "manca". Metodi JavaScript (come getElementsByClassName) e codifica AJAX rapidamente. Queste cose li rendono una buona idea da usare comunque.

Answer 4

Gli ID devono essere univoci, usare le classi in modo 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 = prende di mira entrambi gli elementi
• # obj1.obj = targetizza solo il primo
• # obj1.obj_Meta = target obj1 DIV interno
• # obj2.obj = targetizza solo il secondo
• # obj2.obj_Meta = target obj2 DIV interno

Answer 5

Potresti anche riscontrare problemi con questo markup perché il " meta " il tag è legale solo all'interno del tag head, non del tag body. Per quanto ne so guardando Firebug, Firefox andrà persino al punto di estrarre quei meta tag dal corpo e gettarli in testa (e, in questo caso, mettere qualsiasi contenuto di testo all'interno del div genitore), quindi non li vedrai affatto nel DOM.

Answer 6

Per il codice HTML che hai fornito, dovrebbe funzionare:

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

Basta ignorare l'id falso sul div interno e ottenerlo per nome tag. Dovresti anche essere in grado di ignorare completamente il div interno, poiché getElementsByTagName cerca nell'intera sottostruttura:

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

Answer 7

Dato che l'attributo id è un identificatore univoco a livello di documento, probabilmente dovresti avere lo spazio dei nomi dei tuoi 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')