Μέθοδος getElementsByClassName() του HTML DOM Document

Ορισμός και χρήση

getElementsByClassName() Η μέθοδος επιστρέφει μια συλλογή στοιχείων που έχουν την καθορισμένη κλάση.

getElementsByClassName() Η μέθοδος επιστρέφει HTMLCollection.

getElementsByClassName() Η ιδιότητα είναι αναιρέσιμη.

HTMLCollection

HTMLCollection Είναι μια συλλογή που μοιάζει με λίστα από στοιχεία HTML.

Μπορείτε να προσέξετε στοιχεία της συλλογής μέσω ευρετηρίου (από 0 ξεκινώντας).

length Η ιδιότητα επιστρέφει το αριθμό των στοιχείων της συλλογής.

Για περισσότερες πληροφορίες δείτε:

Μέθοδος getElementById()

Μέθοδος getElementsByTagName()

Μέθοδος querySelector()

Μέθοδος querySelectorAll()

Ομάδα HTMLCollection

Παράδειγμα

Παράδειγμα 1

Ανακτήστε όλα τα στοιχεία με class="example":

const collection = document.getElementsByClassName("example");

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Ανακτηθείτε όλα τα στοιχεία που έχουν τις κλάσεις "example" και "color":

const collection = document.getElementsByClassName("example color");

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Αριθμός στοιχείων class="example":

let numb = document.getElementsByClassName("example").length;

Δοκιμάστε το προσωπικά

Παράδειγμα 4

Αλλάξτε τον χρωματισμό του παρασκηνίου όλων των στοιχείων class="example":

const collection = document.getElementsByClassName("example");
για (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Δοκιμάστε το προσωπικά

Γλώσσα

document.getElementsByClassName("example")classname)

Παράμετροι

Παράμετροι Περιγραφή
classname

Απαιτείται. Η κλάση του στοιχείου.

Ανακτήστε πολλαπλές κλάσεις που διαχωρίζονται με κενά, π.χ. "test demo".

Επιστροφή τιμής

Τύπος Περιγραφή
Όνειρο

Όνειρο Συλλογής HTML

Συλλογή στοιχείων με ορισμένη κλάση.

Ταξινόμηση των στοιχείων ανάλογα με τη σειρά που εμφανίζονται στο έγγραφο.

Υποστήριξη του περιηγητή

document.getElementsByClassName() Είναι χαρακτηριστικό DOM Level 1 (1998).

Όλοι οι περιηγητές υποστηρίζουν το:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Σχετικές σελίδες

Εκμάθηση CSS:Γλωσσή CSS

Εγχειρίδιο CSS:Επιλογέας .class CSS

Εγχειρίδιο HTML DOM:element.getElementsByClassName()

Εγχειρίδιο HTML DOM:Προσδιορισμός className

Εγχειρίδιο HTML DOM:Προσδιορισμός classList

Εγχειρίδιο HTML DOM:Σώμα Στυλ