Σε τι είναι το DOM Selenium WebDriver: Structure, Full Form

Σε τι είναι το DOM Selenium WebDriver;

DOM in Selenium Το WebDriver είναι ένα ουσιαστικό στοιχείο της ανάπτυξης ιστού με χρήση HTML5 και JavaΓραφή. Η πλήρης μορφή του DOM είναι Μοντέλο αντικειμένου εγγράφου. Το DOM δεν είναι μια έννοια της επιστήμης των υπολογιστών. Είναι ένα απλό σύνολο διεπαφών τυποποιημένων μεταξύ των προγραμματιστών ιστού για πρόσβαση και χειρισμό εγγράφων σε HTML ή XML χρησιμοποιώντας JavaΓραφή.

Αυτά τα πρότυπα βοηθούν τους προγραμματιστές να δημιουργήσουν μια ιστοσελίδα χωρίς να ανησυχούν για λεπτομέρειες εφαρμογής. Ορισμένοι από τους οργανισμούς που εμπλέκονται στην τυποποίηση αυτών των διεπαφών είναι όπως οι Mozilla, Apple, Microsoft, Google, Adobe κ.λπ. Ωστόσο, είναι το W3C που επισημοποιεί ένα πρότυπο και το δημοσιεύει – δείτε εδώ (https://dom.spec.whatwg.org/).

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

Κατανόηση της Δομής DOM
Στοιχεία του DOM in Selenium
Εντοπισμός σφαλμάτων στο DOM
Εκδηλώσεις DOM
Αντιμετώπιση προβλημάτων στο DOM

Κατανόηση της Δομής DOM

Θα χρειαστεί να κατανοήσετε τη δομή του DOM εάν φτιάχνετε οποιονδήποτε ιστότοπο που περιλαμβάνει χρήση σεναρίων JavaΓραφή. Η κατανόηση του DOM είναι ακόμη πιο κρίσιμη εάν κάνετε μία ή όλες τις παρακάτω περίπλοκες εργασίες στον ιστότοπό σας –

Ανάπτυξη περιεχομένου που ενημερώνεται συνεχώς χωρίς να ανανεώνεται ολόκληρη η σελίδα – όπως η τρέχουσα τιμή όλων των μετοχών στο χαρτοφυλάκιο του χρήστη σας
Ανάπτυξη προηγμένων αλληλεπιδράσεων με τους χρήστες, όπως η δυναμική προσθήκη ή τροποποίηση περιεχομένου – όπως η δυνατότητα προσθήκης περισσότερων μετοχών στο χαρτοφυλάκιό σας
Ανάπτυξη περιεχομένου που είναι προσαρμόσιμο από τον χρήστη – όπως δυνατότητα αλλαγής της διάταξης έτσι ώστε το χαρτοφυλάκιο Αμοιβαίων κεφαλαίων να εμφανίζεται πριν από το χαρτοφυλάκιο μετοχών
Ανάπτυξη αποκριτικού περιεχομένου στον ιστότοπό σας, κάνοντας έτσι τον ιστότοπό σας να προσαρμόζεται σε διαφορετικές οθόνες πολυμέσων, δηλαδή. iPhone, desktop, tablet κ.λπ. αυτόματα

Μια βασική σελίδα HTML

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

Πώς φαίνεται στο DOM PARSER ενός προγράμματος περιήγησης;

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

Πώς αποκτάτε πρόσβαση στο στοιχείο του σώματος;

<script>
    var body = window.document.body;
</script>

Πώς λέτε "Hello World";

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

Τέλος, ολόκληρο το αρχείο HTML θα μοιάζει

Ανοικτό Windows Σημειωματάριο και επικολλήστε το παρακάτω περιεχόμενο μέσα σε αυτό. Στη συνέχεια, αποθηκεύστε το αρχείο ως "MyFileNewFile.html" (βεβαιωθείτε ότι το όνομα του αρχείου σας τελειώνει σε .html).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

Τέλος, απλώς ανοίξτε το αρχείο χρησιμοποιώντας οποιοδήποτε από τα προγράμματα περιήγησης που προτιμάτε και θα δείτε "Hello World!"

Στοιχεία του DOM in Selenium

Παρακάτω είναι τα κύρια συστατικά του DOM είναι Selenium WebDriver:

Παράθυρο
Έγγραφο
Στοιχείο

Παράθυρο

Παράθυρο είναι το αντικείμενο που περιέχει το αντικείμενο εγγράφου σε ένα DOM. Κάθεται πάνω από όλα.

Για να φτάσετε σε ένα αντικείμενο παραθύρου από ένα δεδομένο έγγραφο

<script>
      var window = document.defaultView;
</script>

Σε ένα περιβάλλον με καρτέλες, κάθε καρτέλα έχει το δικό της αντικείμενο παραθύρου. Ωστόσο, αν κάποιος θέλει να πιάσει και να εφαρμόσει συμβάντα όπως το window.resizeTo και το window.resizeBy, ισχύουν για ολόκληρο το παράθυρο και όχι μόνο για την καρτέλα.

Ιδιότητες του αντικειμένου παραθύρου στο DOM

window.localStorage – δίνει πρόσβαση στον τοπικό χώρο αποθήκευσης του προγράμματος περιήγησης. Η τοπική αποθήκευση μπορεί να χρησιμοποιηθεί για την αποθήκευση και ανάκτηση δεδομένων από μια περίοδο λειτουργίας.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

παράθυρο.ανοιχτήρι - λαμβάνει την αναφορά στο αντικείμενο παραθύρου που άνοιξε αυτό το παράθυρο (είτε κάνοντας κλικ σε έναν σύνδεσμο είτε χρησιμοποιώντας τη μέθοδο window.open)

Χρήσιμες μέθοδοι αντικειμένου παραθύρου

window.alert() – εμφανίζει ένα παράθυρο διαλόγου ειδοποίησης με ένα μήνυμα.

<script>
		window.alert('say hello');
</script>

Υπάρχουν πολλά χρήσιμα συμβάντα που εκθέτει το αντικείμενο παραθύρου. Θα τα συζητήσουμε στην ενότητα "Εκδηλώσεις" στην ενότητα Προηγμένα Θέματα

Έγγραφο

Το έγγραφο σηματοδοτεί την αρχή ενός δέντρου DOM. Το έγγραφο είναι ο πρώτος κόμβος σε ένα DOM. Έχει πολλές μεθόδους και ιδιότητες, των οποίων το πεδίο εφαρμογής ισχύει για ολόκληρο το έγγραφο όπως URL, getElementById, querySelector κ.λπ.

Ιδιότητες αντικειμένου εγγράφου στο DOM

Document.documentURI και Document.URL – Και οι δύο επιστρέφουν την τρέχουσα θέση του εγγράφου. Εάν, ωστόσο, το έγγραφο δεν είναι τύπου HTML Document.URL δεν θα λειτουργήσει.

Document.activeElement – Αυτή η μέθοδος επιστρέφει το στοιχείο στο DOM που βρίσκεται στο επίκεντρο. Αυτό σημαίνει ότι εάν ένας χρήστης πληκτρολογεί σε ένα πλαίσιο κειμένου, το Document.activeElement θα επιστρέψει αναφορά σε αυτό το πλαίσιο κειμένου.

Τίτλος εγγράφου – Χρησιμοποιείται για την ανάγνωση ή τον ορισμό τίτλου ενός δεδομένου εγγράφου.

Χρήσιμες Μέθοδοι Αντικειμένου Εγγράφου

Document.getElementById(Αναγνωριστικό συμβολοσειράς) – αυτή είναι μακράν η πιο σχετική και χρήσιμη μέθοδος στον χειρισμό DOM. Χρησιμοποιείται για την αναζήτηση ενός στοιχείου στο δέντρο DOM χρησιμοποιώντας το μοναδικό του αναγνωριστικό. Η αναζήτηση γίνεται με διάκριση πεζών-κεφαλαίων, π.χ. στο ακόλουθο παράδειγμα το " Δεν είναι δυνατή η αναζήτηση του στοιχείου χρησιμοποιώντας λέξεις όπως IntroDiv ή introdiv ή iNtrodiv κ.λπ.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(Επιλογέας συμβολοσειράς) – αυτή είναι μια άλλη ευρέως χρησιμοποιούμενη μέθοδος για να επιλέξετε ένα ακόμη στοιχείο με βάση τους κανόνες του επιλογέα CSS (εάν είστε εξοικειωμένοι με τη σημείωση $ του jQuery, η ίδια χρησιμοποιεί αυτήν τη μέθοδο). Δεν θα εμβαθύνουμε πολύ στους επιλογείς CSS. Ο επιλογέας CSS είναι ένα σύνολο κανόνων βάσει των οποίων μπορείτε να λάβετε μια λίστα παρόμοιων στοιχείων (με βάση τον κανόνα επιλογέα). Έχουμε χρησιμοποιήσει αυτή τη μέθοδο στο παρελθόν στην ενότητα "Hello World".

Στοιχείο

Στοιχείο είναι οποιοδήποτε αντικείμενο που αντιπροσωπεύεται από έναν κόμβο σε ένα δέντρο DOM ενός εγγράφου. Όπως πάντα, το ίδιο το αντικείμενο Element είναι απλώς μια σύμβαση ιδιοτήτων, μεθόδων και συμβάντων μεταξύ ενός προγράμματος περιήγησης και ενός εγγράφου HTML. Υπάρχουν ειδικά είδη Στοιχείων όπως HTMLElement, SVGElement, XULElement κ.λπ. Θα επικεντρωθούμε μόνο στο HTMLElement σε αυτό το σεμινάριο.

Ιδιότητες αντικειμένου στοιχείου στο DOM

Element.id – Αυτή η ιδιότητα μπορεί να χρησιμοποιηθεί για τον ορισμό ή την ανάγνωση "ID" (ένα μοναδικό αναγνωριστικό) για ένα στοιχείο HTML. Το αναγνωριστικό πρέπει να είναι μοναδικό μεταξύ των στοιχείων σε ένα δέντρο DOM. Όπως αναφέρθηκε προηγουμένως, το ID χρησιμοποιείται επίσης από τη μέθοδο Document.getElementById για την επιλογή ενός συγκεκριμένου αντικειμένου Element μέσα σε ένα δέντρο DOM.

HTMLElement.contentΕπεξεργάσιμο – Η ιδιότητα contentEditable ενός στοιχείου καθορίζει εάν το περιεχόμενο του στοιχείου αυτού είναι επεξεργάσιμο/τροποποιήσιμο. Αυτή η ιδιότητα μπορεί να οριστεί όπως φαίνεται στο παρακάτω σενάριο. Αυτή η ιδιότητα μπορεί επίσης να χρησιμοποιηθεί για να προσδιοριστεί εάν ένα δεδομένο στοιχείο είναι επεξεργάσιμο ή όχι. Δοκιμάστε το παρακάτω σενάριο μέσα σε οποιοδήποτε σώμα HTML και θα παρατηρήσετε ότι μπορείτε να επεξεργαστείτε οποιοδήποτε περιεχόμενο του σώματος.

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – Το innerHTML είναι μια άλλη σημαντική ιδιότητα που χρησιμοποιούμε για την πρόσβαση σε περιεχόμενο HTML μέσα σε ένα στοιχείο. Χρησιμοποιείται επίσης για τον ορισμό νέου περιεχομένου HTML του στοιχείου. Χρησιμοποιείται ευρέως για τον ορισμό/αλλαγή του περιεχομένου των πεδίων δεδομένων. Ας πούμε, για παράδειγμα, ότι θέλετε η ιστοσελίδα σας να ενημερώνει τη θερμοκρασία της πόλης Μουμπάι κάθε ώρα, μπορείτε να εκτελείτε το σενάριο στο παρακάτω παράδειγμα κάθε ώρα.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Χρήσιμες Μέθοδοι Αντικειμένου Στοιχείου

HTMLElement.blur() & HTMLElement.focus() – Οι μέθοδοι θολώματος και εστίασης χρησιμοποιούνται για την αφαίρεση της εστίασης ή την εστίαση σε ένα στοιχείο HTML αντίστοιχα. Αυτές οι μέθοδοι χρησιμοποιούνται ευρέως για τη μετακίνηση της εστίασης ενός δρομέα μεταξύ πλαισίων κειμένου σε μια ιστοσελίδα εισαγωγής δεδομένων.

Element.querySelectorAll – Αυτή η μέθοδος είναι παρόμοια με τη μέθοδο querySelector που έχει ήδη συζητηθεί για το αντικείμενο εγγράφου. Ωστόσο, αυτή η μέθοδος θα περιορίσει την αναζήτησή της στους απογόνους του ίδιου του στοιχείου.

Εντοπισμός σφαλμάτων στο DOM

Εργαλεία προγραμματιστή του Google Chrome, Μοζίλα Firefox, Internet Explorer (10 ή παραπάνω) ή Safari επιτρέπουν τον εύκολο εντοπισμό σφαλμάτων απευθείας μέσα στο πρόγραμμα περιήγησης. Μερικές φορές διαφορετικά προγράμματα περιήγησης ερμηνεύουν την ίδια σήμανση HTML διαφορετικά και αυτό συμβαίνει όταν ο εντοπισμός σφαλμάτων σάς βοηθά να επιθεωρήσετε το DOM όπως έχει ερμηνευτεί από τη μηχανή DOM του συγκεκριμένου προγράμματος περιήγησης.

Τώρα, ας πούμε ότι θέλετε να αλλάξετε την τιμή θερμοκρασίας από 26^oC έως 32^oΓ στο τελευταίο σας παράδειγμα. Θα κάνουμε μερικά απλά βήματα για να το κάνουμε αυτό. Τα στιγμιότυπα που εμφανίζονται εδώ είναι από το Mozilla Firefox– ωστόσο, τα βήματα είναι ίδια σε όλα τα άλλα προγράμματα περιήγησης.

Ανοίξτε το MyFileNewFile.html (ή οποιοδήποτε όνομα δώσατε στο αρχείο HTML στα παραπάνω μαθήματα) χρησιμοποιώντας το πρόγραμμα περιήγησής σας
Χρησιμοποιήστε το ποντίκι σας και κάντε δεξί κλικ στην τιμή θερμοκρασίας 26^oC και κάντε κλικ στο "Επιθεώρηση στοιχείου"
Σημειώστε ότι το στοιχείο στο οποίο επιλέξατε "Επιθεώρηση στοιχείου" εμφανίζεται επισημασμένο στο πρόγραμμα περιήγησής σας (το παράθυρο του προγράμματος εντοπισμού σφαλμάτων εμφανίζεται συνήθως στο κάτω μέρος της οθόνης)
Ανοίξτε το στοιχείο κάνοντας κλικ στο κεκλιμένο τρίγωνο δίπλα του
Επιλέξτε αυτό που θέλετε να επεξεργαστείτε και κάντε διπλό κλικ πάνω του. Θα έχετε την επιλογή να αλλάξετε το κείμενο. Κάντε όπως υποδεικνύεται στην παρακάτω κινούμενη εικόνα.
Παρατηρήστε την αλλαγή στο περιεχόμενο της σελίδας σας HTML. Μπορείτε να κλείσετε το παράθυρο εντοπισμού σφαλμάτων τώρα.

Λάβετε υπόψη ότι οι αλλαγές σας θα διατηρηθούν μόνο για αυτήν την περίοδο λειτουργίας. Μόλις επαναφορτώσετε ή ανανεώσετε (πατήστε F5) η σελίδα θα επανέλθει στις αλλαγές. Αυτό σημαίνει ότι δεν αλλάξατε την πραγματική πηγή HTML αλλά απλώς την τοπική ερμηνεία του προγράμματος περιήγησής σας.

Ως διασκεδαστική άσκηση δοκιμάστε να κάνετε τα εξής. Ανοιχτό www.facebook.com στο πρόγραμμα περιήγησής σας και χρησιμοποιήστε το εργαλείο εντοπισμού σφαλμάτων για να παρακολουθήσετε το αποτέλεσμα - παρατηρήστε πώς λέει "Έχω χακάρει το Facebook".

Διαδικασία εντοπισμού σφαλμάτων στο DOM

Εκδηλώσεις DOM

Τι είναι τα συμβάντα στο DOM;

Τα συμβάντα είναι ένα μοντέλο προγραμματισμού όπου τα περιστατικά που ενεργοποιούνται από τον χρήστη (ή ενεργοποιείται ο κύκλος ζωής της σελίδας του προγράμματος περιήγησης) μεταδίδονται ως μηνύματα. Για παράδειγμα, όταν μια σελίδα έχει ολοκληρώσει τη φόρτωση, ενεργοποιεί το συμβάν window.load και παρομοίως όταν ο χρήστης κάνει κλικ σε ένα κουμπί που ενεργοποιείται το συμβάν κλικ του στοιχείου.

Αυτά τα μηνύματα μπορούν να υποκλαπούν από οποιονδήποτε JavaΓραφή κώδικα και στη συνέχεια μπορεί να γίνει μια ενέργεια που ορίζεται από τον προγραμματιστή. Ας πούμε, για παράδειγμα, ότι θα θέλατε οι αριθμοί στην ιστοσελίδα σας να ενημερώνονται μόνο όταν ο χρήστης κάνει κλικ σε ένα κουμπί. Μπορείτε να το πετύχετε με οποιαδήποτε από τις παρακάτω μεθόδους –

Αντιστοιχίστε ενέργεια στο συμβάν onclick του στοιχείου HTML
Αντιστοιχίστε ενέργεια στο συμβάν κλικ χρησιμοποιώντας τη μέθοδο addEventListener

Μέθοδος 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

Μέθοδος 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

Αντιμετώπιση προβλημάτων στο DOM

Ερ. Πώς μπορώ να ξέρω εάν ένα στοιχείο υπάρχει ή όχι;

A. Δοκιμάστε να αναζητήσετε το στοιχείο χρησιμοποιώντας οποιονδήποτε επιλογέα και ελέγξτε εάν το στοιχείο που επιστράφηκε είναι μηδενικό. Δείτε παράδειγμα παρακάτω -

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

Ε. Λαμβάνω TypeError: Το document.getElementByID δεν είναι συνάρτηση…

A. Βεβαιωθείτε ότι το όνομα της μεθόδου ταιριάζει ακριβώς με τη μέθοδο API. Όπως στην παραπάνω ερώτηση – είναι getElementById και όχι getElementByID.

Ε. Ποια είναι η διαφορά μεταξύ των παιδιών και των childNodes;

A. Η μέθοδος τα παιδιά μας δίνουν τη συλλογή όλων των στοιχείων μέσα στο στοιχείο κλήσης. Η συλλογή που επιστράφηκε είναι τύπου HTMLCollection. Ωστόσο, η μέθοδος childNodes μας δίνει τη συλλογή όλων των κόμβων μέσα στο στοιχείο κλήσης. Προσθέστε τα ακόλουθα σενάρια στο παράδειγμά μας και δείτε τη διαφορά –

Η μέθοδος childNodes επιστρέφει 14 στοιχεία

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Ενώ η μέθοδος παιδιών επιστρέφει μόλις 7 αντικείμενα

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

Ε. Λαμβάνω Uncaught TypeError: Δεν μπορώ να διαβάσω την ιδιότητα 'innerHTML' απροσδιόριστου…

A. Βεβαιωθείτε ότι η παρουσία του HTMLElement στο οποίο καλείτε την ιδιότητα innerHTML ορίστηκε μετά την αρχική δήλωση. Αυτό το σφάλμα συμβαίνει γενικά στο ακόλουθο σενάριο. Δείτε πώς μπορεί να αποφευχθεί το σφάλμα στο επόμενο μπλοκ κώδικα…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

Σύνοψη

Σε αυτό το σεμινάριο μάθαμε τι είναι ένα DOM και πώς είναι βασική ιδέα να κατανοήσουμε τη δημιουργία δυναμικών ιστοσελίδων.
Αγγίσαμε επίσης τύπους στοιχείων DOM όπως Παράθυρο, Έγγραφο και Στοιχείο.
Μάθαμε μερικές χρήσιμες μεθόδους και ιδιότητες DOM που είναι διαθέσιμες σε κάθε είδος.
Είδαμε πώς τα περισσότερα προγράμματα περιήγησης προσφέρουν εργαλεία προγραμματιστών για αναπαραγωγή με οποιαδήποτε ιστοσελίδα διαθέσιμη στο Διαδίκτυο – μαθαίνοντας έτσι τον εντοπισμό σφαλμάτων και την επίλυση προβλημάτων με τον δικό μας ιστότοπο.
Επίσης αναφερθήκαμε εν συντομία στους μηχανισμούς συμβάντων DOM.
Τέλος, καλύψαμε μερικά στοιχεία αντιμετώπισης προβλημάτων στο DOM.
Το Διαδίκτυο είναι γεμάτο με πόρους στο DOM. Ένα από τα καλύτερα και ενημερωμένα υλικά αναφοράς είναι διαθέσιμο στο δίκτυο προγραμματιστών της Mozilla. Βλέπω - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model