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

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

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

Δείτε επίσης:

Αtribούς classList

Αtribούς className

Μέθοδος querySelector()

Μέθοδος querySelectorAll()

Μέθοδος getElementsByTagName()

Αντικείμενο Style HTML DOM

Εκμάθηση:

Γλώσσα CSS

Επιλογέας CSS

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

NodeList

NodeList Είναι συλλογή κόμβων που μοιάζουν με λίστα (λίστα).

Μπορείτε να προσέξετε τους κόμβους στη λίστα μέσω του δείκτη (υποτύπου). Ο δείκτης ξεκινάει από 0.

Αtribούς lengthΕπιστροφή του αριθμού των κόμβων στη λίστα.

Παράδειγμα

Παράδειγμα 1

Αλλαγή του κειμένου του πρώτου στοιχείου της λίστας με τη χρήση της κλάσης "child":

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

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

Παράδειγμα 2

Ο αριθμός των στοιχείων class="child" στο "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

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

Παράδειγμα 3

Τροποποίηση του μεγέθους του δεύτερου στοιχείου της κλάσης "child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

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

Παράδειγμα 4

Χρησιμοποιήστε τις κλάσεις "child" και "color" για να αλλάξετε το μέγεθος του πρώτου στοιχείου στο δεύτερο στοιχείο με class="example":

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

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

Παράδειγμα 5

Αλλάξτε τη χρώση όλων των στοιχείων με class="child" στο "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

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

Γλώσσα

element.getElementsByClassName(classname)

Παράμετροι

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

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

Χρησιμοποιήστε κενά για να διαχωρίσετε πολλαπλά ονόματα (π.χ. "child color").

Αποτελεσματικότητα

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

Υποστηρίζουν τα στοιχεία που περιέχουν την καθορισμένη κλάση.

Τα στοιχεία οργανώνονται με βάση τη σειρά που εμφανίζονται στον κώδικα πηγής.

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

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

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

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