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

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

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

Συμβουλή:Αξία παραμέτρου "*" Επιστρέφει όλους τους υποστοιχεία των στοιχείων.

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

Μέθοδος getElementsByClassName()

Μέθοδος querySelector()

Μέθοδος querySelectorAll()

NodeList

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

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

Αtributo lengthΕπιστρέφει τον αριθμό των κόμβων της λίστας.

Παράδειγμα

Παράδειγμα 1

Αλλάξει το περιεχόμενο HTML του πρώτου στοιχείου <li> της λίστας:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Ο αριθμός των στοιχείων <p> στο "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Προσπαθήστε το προσωπικά

Παράδειγμα 3

Αλλάξει το μέγεθος γραμματοσειράς του δεύτερου στοιχείου <p> του "myDIV":

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

Προσπαθήστε το προσωπικά

Παράδειγμα 4

Αλλάξει τον χρωματισμό φόντου όλων των στοιχείων <p> του "myDIV":

const div = document.getElementById("myDIV");
const nodes = x.getElementsByTagName("P");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Προσπαθήστε το προσωπικά

Παράδειγμα 5

Αλλάξει τον χρωματισμό φόντου του τέταρτου στοιχείου του "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Προσπαθήστε το προσωπικά

Παράδειγμα 6

Χρησιμοποιώντας το παράμετρο "*", αλλάξτε το χρώμα φόντου όλων των στοιχείων του "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Προσπαθήστε το προσωπικά

Γλώσσα

element.getElementsByTagName(tagname)

Παράμετρος

Παράμετρος Περιγραφή
tagname Απαιτείται. Το όνομα ετικέτας του υποεπιόντος στοιχείου.

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

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

Τα στοιχεία που έχουν το καθορισμένο όνομα ετικέτας.

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

Τεχνικά λεπτομέρειες

getElementsByTagName() Η μέθοδος θα περιπλέξει τα απογόνων του καθορισμένου στοιχείου, θα επιστρέψει έναν πίνακα που περιέχει στοιχεία Element (αυτή είναι μια αντικειμενική λίστα NodeList), που εκπροσωπεί όλα τα στοιχεία εγγράφου με το καθορισμένο όνομα ετικέτας. Η σειρά των στοιχείων στο πίνακα είναι η σειρά που εμφανίζονται στο κώδικα πηγής του εγγράφου.

Σημείωση

Διεπαφή Documentυποστηρίζει επίσης Μέθοδος getElementsByTagName()，είναι παρόμοια με αυτήν, αλλά περιπλέκει ολόκληρο το έγγραφο, αντί να περιπλέκει τα απογόνων του στοιχείου.

Μην το συγχέετε με Η μέθοδος HTMLDocument.getElementsByName() Αναμειγνύονται, η δεύτερη βασίζεται στη τιμή του attributes name του στοιχείου αναζητώντας το στοιχείο, αντί να αναζητά το στοιχείο με βάση το όνομα του ετικέτας του.

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

Όλοι οι περιηγητές υποστηρίζουν element.getElementsByTagName():

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