Μέθοδοι DOM HTML

querySelector ()

Η μέθοδος εγγράφου querySelector()επιστρέφει το firstστοιχείο μέσα στο έγγραφο που ταιριάζει με τον καθορισμένο επιλογέα ή την ομάδα επιλογών. Εάν δεν βρεθούν αγώνες, επιστρέφεται το null.

Περιεχόμενο HTML:

 element-example 

Περιεχόμενο JavaScript:

document.querySelector("#id-example"); // Returns the element with id "id-example" document.querySelector(".class-example"); // Returns the element with class "class-example" document.querySelector("a"); // Returns the "a" element 

Η σημείωση querySelector()επιστρέφει το πρώτο στοιχείο αντιστοίχισης, για να επιστρέψετε όλους τους αγώνες, χρησιμοποιήστε τη μέθοδο querySelectorAll ().

 First Second 
document.querySelector("#example"); // Returns only the element containing 'First'

innerHTML

Το innerHTMLστήριγμα επιστρέφει το περιεχόμενο HTML σε ένα επιλεγμένο στοιχείο και σας επιτρέπει επίσης να ορίσετε ένα νέο περιεχόμενο HTML.

Λήψη περιεχομένου στοιχείων

Demo

var element = document.getElementById("demo"); console.log(element.innerHTML) //logs 

Demo

Ορισμός περιεχομένου στοιχείου

var element = document.getElementById("demo"); element.innerHTML = " Demo ";

Το HTML θα είναι τώρα σαν

 Demo 

Ζητήματα ασφάλειας

Η τιμή που έχει οριστεί innerHTMLπρέπει να προέρχεται από αξιόπιστες πηγές, καθώς το Javascript θα βάλει οτιδήποτε μέσα σε αυτό το στοιχείο και θα εκτελεστεί ως απλό HTML.

Παράδειγμα:

Ο ορισμός μιας alert();τιμής " " θα προκαλέσει την ενεργοποίηση της λειτουργίας Javascript "alert ()":

var element = document.getElementById("demo"); element.innerHTML = "alert();";

Αυτός ο τύπος επίθεσης ονομάζεται Cross Site Scripting ή XSS για συντομία.

Αυτός είναι ένας από τους πιο συνηθισμένους τρόπους εκτέλεσης μιας επίθεσης XSS. Εάν θέλετε να μάθετε λίγο περισσότερο και να μάθετε να το αμύνετε, ρίξτε μια ματιά σε αυτόν τον πόρο.

getElementById ()

Η getElementById()μέθοδος επιστρέφει το στοιχείο που έχει το χαρακτηριστικό id με την καθορισμένη τιμή. Χρειάζεται ένα όρισμα, το οποίο είναι μια συμβολοσειρά με κεφαλαία γράμματα του αναγνωριστικού για το στοιχείο που θέλετε.

Αυτή η μέθοδος είναι μια από τις πιο κοινές μεθόδους στο HTML DOM και χρησιμοποιείται σχεδόν κάθε φορά που θέλετε να χειριστείτε ή να λάβετε πληροφορίες από ένα στοιχείο στο έγγραφό σας. Εδώ είναι ένα απλό παράδειγμα της σύνταξης:

Περιεχόμενο HTML:

Περιεχόμενο JavaScript:

document.getElementById("demo"); // Returns the element with id "demo"

Εάν έχετε περισσότερα από ένα στοιχεία με την ίδια τιμή id(κακή πρακτική!), getElementByIdΘα επιστρέψετε το πρώτο στοιχείο που βρέθηκε:

 First Second 
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

Περισσότερες πληροφορίες:

document.getElementById ()

Εναλλακτικές λύσεις:

Μια εναλλακτική λύση που χρησιμοποιείται συνήθως document.getElementByIdείναι η χρήση ενός επιλογέα jQuery για τον οποίο διαβάζετε περισσότερα εδώ.

Περισσότερες πληροφορίες σχετικά με το HTML DOM

Με το HTML DOM, το JavaScript μπορεί να έχει πρόσβαση και να αλλάξει όλα τα στοιχεία ενός εγγράφου HTML.

Όταν φορτώνεται μια ιστοσελίδα, το πρόγραμμα περιήγησης δημιουργεί ένα D ocument O bject M odel της σελίδας.

Το μοντέλο HTML DOM κατασκευάζεται ως δέντρο αντικειμένων:

Κάθε στοιχείο στο DOM ονομάζεται επίσης κόμβος.

   My title    My Link 

My header

Το DOM για το παραπάνω HTML έχει ως εξής:

Δέντρο DOM

Με το μοντέλο αντικειμένου, το JavaScript αποκτά όλη τη δύναμη που χρειάζεται για να δημιουργήσει δυναμικό HTML:

  • Το JavaScript μπορεί να αλλάξει όλα τα στοιχεία HTML στη σελίδα
  • Το JavaScript μπορεί να αλλάξει όλα τα χαρακτηριστικά HTML στη σελίδα
  • Το JavaScript μπορεί να αλλάξει όλα τα στυλ CSS στη σελίδα
  • Το JavaScript μπορεί να αφαιρέσει υπάρχοντα στοιχεία και χαρακτηριστικά HTML
  • Το JavaScript μπορεί να προσθέσει νέα στοιχεία και χαρακτηριστικά HTML
  • Το JavaScript μπορεί να αντιδρά σε όλα τα υπάρχοντα συμβάντα HTML στη σελίδα
  • Το JavaScript μπορεί να δημιουργήσει νέα γεγονότα HTML στη σελίδα