Wie erhalte ich nur ein DOM-Element nach Klassenname? Ich vermute, dass die Syntax zum Abrufen von Elementen nach Klassennamen lautet getElementsByClassName
aber ich bin mir nicht sicher, wie viele Elemente es zurückgeben wird.
Wie bekomme ich mit JavaScript nur ein Element nach Klassenname?
Ismatjon
Rahat Channa
document.getElementsByClassName('className')
würde immer mehrere Elemente zurückgeben, da Klassen konzeptionell auf mehrere Elemente angewendet werden sollen. Wenn Sie nur das erste Element im DOM mit dieser Klasse haben möchten, können Sie das erste Element aus der auswählen Array-artig HTMLCollection
ist zurückgekommen.
var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];
Andernfalls, wenn Sie wirklich nur ein Element auswählen möchten. Dann müssen Sie ‘id’ verwenden, da es konzeptionell als Identifikator für eindeutige Elemente in einer Webseite verwendet wird.
// HTML
<div id="myElement"></div>
// JS
var requiredElement = document.getElementById('myElement');
-
getElementsByClassName gibt eine NodeList zurück, kein Array – FYI
– rlemon
29. Januar 2014 um 16:34 Uhr
-
@Ismatjon Ich glaube, er hat nur den ID-Ansatz vorgeschlagen, weil er insgesamt sauberer ist. Der ursprüngliche Vorschlag hier gilt jedoch.
– rlemon
29. Januar 2014 um 18:01 Uhr
-
die erste Antwort zu verwenden
nodelist[index in the node list]
stimmt aber trotzdem. Der zweite Teil war ein Vorschlag (alles was ich gesagt habe)– rlemon
29. Januar 2014 um 18:05 Uhr
-
“Andernfalls, wenn Sie wirklich nur ein Element auswählen möchten. Dann müssen Sie ‘id’ verwenden …” Gar nicht. Es ist völlig in Ordnung, nur ein einzelnes Element mit einer Klasse zu haben. Sie finden es, wie einige andere Antworten hier zeigen, indem Sie verwenden
document.querySelector(".the-class-name")
.– TJ Crowder
20. März um 18:45 Uhr
sebilasse
Erläuterungen:
-
getElementsByClassName gibt eine Knotenliste und kein Array zurück
-
Sie benötigen kein jQuery
-
Was Sie gesucht haben, war wahrscheinlich
document.querySelector
:
Wie erhalte ich nur ein DOM-Element nach Klassenname?
var firstElementWithClass = document.querySelector('.myclass');
Siehe auch: https://developer.mozilla.org/en/docs/Web/API/Document/querySelector
-
Bitte geben Sie einige zusätzliche Informationen darüber an, warum Sie dies bevorzugen, um ElementsByClassName abzurufen?
– GeorgeButter
15. Dezember 2017 um 4:04 Uhr
-
@Aber weil querySelector (nicht querySelectorAll !) nach der ersten Übereinstimmung stoppt. Allerdings ist querySelectorAll viel langsamer als getElementsByClassName.
– max
16. September 2018 um 8:54 Uhr
-
document.getElementsByClassName
gibt ein (live)HTMLCollection
kein (statisches)NodeList
.– Verbindung
17. September um 7:28 Uhr
Lukas Reis
Sie können jQuery verwenden:
$('.className').eq(index)
Oder Sie können die integrierte Javascript-Methode verwenden:
var elements = document.getElementsByClassName('className');
Dies gibt eine nodeList von Elementen zurück, die Sie iterieren und erstellen können, was Sie wollen.
Wenn Sie nur eines möchten, können Sie wie folgt auf die Elemente in der Javascript-Version zugreifen:
elements[index]
-
Ich habe die Bearbeitung vorgenommen – aber seien Sie darauf hingewiesen, dass Sie a zurückgeben werden Knotenliste kein Array. Sie sind ähnlich, aber nicht gleich.
– rlemon
29. Januar 2014 um 16:34 Uhr
-
Auch in Ihrem jQuery-Beispiel werden immer noch alle Elemente gesammelt. api.jquery.com/eq ist wahrscheinlich das, was Sie dort wollen.
– rlemon
29. Januar 2014 um 16:35 Uhr
-
Ich weiß, wie man jQuery verwendet. das ist nicht, was ich frage. Ich möchte einen reinen Javascript-Ansatz.
– Ismatjon
29. Januar 2014 um 17:46 Uhr
-
@Ismatjon, wie ich in den anderen Antwortkommentaren erwähnt habe, wird der Klammernotationsindex dies für Sie lösen. Ich warne davor, getElementsByClassName zu verwenden, wenn Sie IE8 unterstützen müssen (nicht unterstützt). Lesen Sie stattdessen etwas über document.querySelector und document.querySelectorAll
– rlemon
29. Januar 2014 um 18:02 Uhr
-
@lsmatjon, aber Sie können mit diesem Ansatz oben auf das erste Element zugreifen
– Lukas Reis
30. Januar 2014 um 15:21 Uhr
StefanJM
Für alle, die einen Einzeiler suchen
var first = document.getElementsByClassName('test')[0];
-
Ihr Code verwendet
HTMLCollection.item()
nichtNodeList.item()
.– Verbindung
17. September um 7:31 Uhr
Ahmet Emre Kilinc
Du kannst es damit versuchen:
document.getElementsByClassName("className")[index]
-
Ihr Code verwendet
HTMLCollection.item()
nichtNodeList.item()
.– Verbindung
17. September um 7:31 Uhr
Es gibt ein Array von DOM-Elementen zurück. Sie können die erforderlichen auswählen, indem Sie den Index angeben. Wie document.getElementsByClassName (‘className’) [0] um das erste Element zu erhalten.
– Arunkumar Srisailapathi
29. Januar 2014 um 16:17 Uhr
@ArunKumar Technisch gesehen ist es eine HTMLCollection, die Array-ähnlich ist, kein tatsächliches Array.
– Anthony Grist
29. Januar 2014 um 16:19 Uhr
@AnthonyGrist: Ja, einverstanden! Sie können trotzdem auf sie zugreifen, wie ich gesagt habe, nicht wahr?
– Arunkumar Srisailapathi
29. Januar 2014 um 16:20 Uhr
@ArunKumar (ich wiederhole mich jetzt nur), aber es gibt eine NodeList zurück – kein Array. Dies ist wichtig zu beachten, da die Array-Funktionen für nodeLists nicht verfügbar sind.
– rlemon
29. Januar 2014 um 16:39 Uhr
@rlemon erleuchtet 🙂
– Arunkumar Srisailapathi
29. Januar 2014 um 16:54 Uhr