JavaScript HTML DOM στοιχεία

Αυτό το κεφάλαιο σας εξηγεί πώς να αναζητήσετε και να προσβείτε στα HTML στοιχεία της σελίδας HTML.

Αναζήτηση HTML στοιχείων

Συνήθως, μέσω JavaScript, χρειάζεστε να επεξεργαστείτε HTML στοιχεία.

Για να επιτύχετε αυτό, πρέπει πρώτα να βρείτε αυτά τα στοιχεία. Υπάρχουν διάφοροι τρόποι για να το κάνετε αυτό:

  • Αναζήτηση HTML στοιχείων μέσω id
  • Βρείτε HTML στοιχεία μέσω τύπου ετικέτας
  • Βρείτε HTML στοιχεία μέσω κλάσης
  • Βρείτε HTML στοιχεία μέσω CSS επιλέκτη
  • Αναζήτηση HTML στοιχείων μέσω συλλογής HTML αντικειμένων

Αναζήτηση HTML στοιχείων μέσω id

Η πιο απλή μέθοδος για την αναζήτηση HTML στοιχείων στο DOM είναι η χρήση του id του στοιχείου.

Σε αυτό το παράδειγμα, αναζητείται το στοιχείο με το id="intro":

Παράδειγμα

var myElement = document.getElementById("intro");

Προσπάθησε να το δεις μόνος σου

Αν βρεθεί το στοιχείο, αυτή η μέθοδος θα επιστρέψει το στοιχείο ως αντικείμενο (στο myElement).

Αν δεν βρεθεί στοιχείο, το myElement θα περιέχει null.

Βρείτε HTML στοιχεία μέσω τύπου ετικέτας

Σε αυτό το παράδειγμα, αναζητούνται όλα τα στοιχεία <p> Στοιχείο:

Παράδειγμα

var x = document.getElementsByTagName("p");

Προσπάθησε να το δεις μόνος σου

Σε αυτό το παράδειγμα, αναζητείται το στοιχείο με το id="main" και στη συνέχεια αναζητούνται όλα τα στοιχεία <p> Στοιχείο:

Παράδειγμα

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Προσπάθησε να το δεις μόνος σου

Βρείτε HTML στοιχεία μέσω κλάσης

Αν χρειάζεστε να βρείτε όλα τα HTML στοιχεία με την ίδια κλάση, χρησιμοποιήστε getElementsByClassName().

Σε αυτό το παράδειγμα, επιστρέφεται η λίστα με όλα τα στοιχεία που περιέχουν την κλάση="intro":

Παράδειγμα

var x = document.getElementsByClassName("intro");

Προσπάθησε να το δεις μόνος σου

Δεν ισχύει για την Internet Explorer 8 και τις προηγούμενες εκδόσεις.

Βρείτε HTML στοιχεία μέσω CSS επιλέκτη

Αν χρειάζεστε να βρείτε όλους τους HTML στοιχεία που ταιριάζουν με το καθορισμένο CSS επιλέκτη (id, όνομα κλάσης, τύπος, ιδιότητες, τιμές ιδιοτήτων κ.λπ.), χρησιμοποιήστε querySelectorAll() Μέθοδοι.

Σε αυτό το παράδειγμα, επιστρέφονται όλα τα στοιχεία με την κλάση="intro" <p> Λίστα στοιχείων:

Παράδειγμα

var x = document.querySelectorAll("p.intro");

Προσπάθησε να το δεις μόνος σου

querySelectorAll() Δεν ισχύει για την Internet Explorer 8 και τις προηγούμενες εκδόσεις.

Αναζητά αντικείμενα HTML μέσω του επιλεκτικού αντικειμένου HTML

Αυτό το παράδειγμα αναζητά το στοιχείο με id="frm1" του στοιχείου form στην συλλογή forms και εμφανίζει τις τιμές όλων των στοιχείων:

Παράδειγμα

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Προσπάθησε να το δεις μόνος σου

Τα παρακάτω αντικείμενα HTML (και συλλογές αντικειμένων) είναι επίσης προσβάσιμα: