Wie bekomme ich mit JavaScript nur ein Element nach Klassenname?

Lesezeit: 4 Minuten

Benutzeravatar von Ismatjon
Ismatjon

Wie erhalte ich nur ein DOM-Element nach Klassenname? Ich vermute, dass die Syntax zum Abrufen von Elementen nach Klassennamen lautet getElementsByClassNameaber ich bin mir nicht sicher, wie viele Elemente es zurückgeben wird.

  • 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

Benutzeravatar von Rahat Khanna
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

Benutzeravatar von sebilasse
sebilasse

Erläuterungen:

  1. getElementsByClassName gibt eine Knotenliste und kein Array zurück

  2. Sie benötigen kein jQuery

  3. 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) HTMLCollectionkein (statisches) NodeList.

    – Verbindung

    17. September um 7:28 Uhr

Benutzeravatar von Lucas Reis
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

Benutzeravatar von StefanJM
StefanJM

Für alle, die einen Einzeiler suchen

var first = document.getElementsByClassName('test')[0];

Verwenden NodeList.item().

Zum Beispiel:

var first = getElementsByClassName('test').item(0);

Benutzeravatar von Ahmet Emre Kilinc
Ahmet Emre Kilinc

Du kannst es damit versuchen:

document.getElementsByClassName("className")[index]

1434460cookie-checkWie bekomme ich mit JavaScript nur ein Element nach Klassenname?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy