Holen Sie sich den ersten untergeordneten Knoten eines bestimmten Typs

69

Ist es möglich, ein untergeordnetes dom-Element abzurufen, das das erste untergeordnete Element eines bestimmten Typs ist?

Zum Beispiel möchte ich in diesen beiden Beispielen das imgElement erhalten:

<a id="mylink" href="#"><img src="myimage.jpg" /></a>

vs.

<a id="mylink" href="#"><span></span><img src="myimage.jpg" /></a>

javascript dom

— Felix Kling
quelle

Keine der Antworten weist darauf hin, dass Ihr Code aufgrund doppelter IDs ungültig ist.

— Rob W

3

@RobW - Ich habe fast den gleichen Kommentar abgegeben, aber ich denke, er diente nur zu Demonstrationszwecken. Es ist buchstäblich identisch, bis auf die span.

— Jared Farrish

@JaredFarrish Ob zu Demonstrationszwecken oder nicht, die IDs müssen eindeutig sein. Ersetzen classdurch classwürde das Problem lösen. Die Antworten wären auch unterschiedlich: .getElementsByClassName('mylink')[0](oder welcher Index auch immer) und .querySelector('.mylink'). Bei IDs ist die Antwort mit der höchsten Bewertung falsch, da bei dem ersten Element <a id=mylink></a>kein <img>Element ausgewählt ist.

— Rob W

Ha - ja, es soll zeigen, dass ich das erste Kind des Bildtyps bekommen möchte - und dass es nicht wirklich das erste Kind bedeutet :)

8

@RobW - Das OP beabsichtigt nicht, dass beide Elemente auf derselben Seite vorhanden sind, sondern dass beide Formulare vorhanden sind . Setzen Sie eine vs.dazwischen und das ist, was ich glaube, das OP beabsichtigt.

— Jared Farrish

127

Versuche dies

var firstIMG = document.getElementById('mylink').getElementsByTagName('img')[0];

— Yogi
quelle

3

WARNUNG: getElementsByTagName ruft alle passenden Nachkommen ab, NICHT NUR direkte Kinder. Wenn Sie tatsächlich ein Kind bekommen möchten, kann dieser Ansatz in Fällen wie <a id="mylink" href="#"> <span> <img src = "not_child.jpg" /> </ span> <img fehlschlagen src = "first_direct_child.jpg" /> </a>, da Sie das Nachkommenbild "not_child.jpg" erhalten.

— Ciabaros

35

Sie können auch verwenden querySelector:

var firstImg = document.querySelector("#mylink > img:first-of-type");

— Zeta
quelle

4

:first-childmuss ersetzt werden durch :first-of-type.

— Rob W

3

var anchor = document.getElementById('mylink');
var images = anchor.getElementsByTagName('img');
var image = images.length ? images[0] : null;

— Michael Robinson
quelle

0

Hier ist eine Javascript-Funktion

function getFirst(con,tag)
{
    return con.getElementsByTagName(tag)[0];
}


//html markup
<a id="mylink" href="#"><img src="myimage.jpg" /></a>
<a id="mylink1" href="#"><img src="myimage.jpg" /></a>

//test
var con=document.getElementById('mylink');
var first=getFirst(con,'img');

— Raumfahrer12
quelle

Holen Sie sich den ersten untergeordneten Knoten eines bestimmten Typs - JavaScript