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

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

Antworten:

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