034.4 Μάθημα 1

Πιστοποιητικό:

Web Development Essentials

Έκδοση:

1.0

Θέμα:

034 Προγραμματισμός με JavaScript

Σκοπός:

034.4 Χειρισμός Περιεχομένου και Styling Iστότοπου με JavaScript

Μάθημα:

1 απο 1

Εισαγωγή

Η HTML, η CSS και η JavaScript είναι τρεις ξεχωριστές τεχνολογίες που συνδυάζονται στον Ιστό. Για να δημιουργήσει πραγματικά δυναμικές και διαδραστικές σελίδες, ο προγραμματιστής JavaScript πρέπει να συνδυάζει στοιχεία από HTML και CSS κατά το χρόνο εκτέλεσης, μια εργασία που διευκολύνεται πολύ με τη χρήση του Document Object Model (DOM).

Αλληλεπιδρώντας με το DOM

Το DOM είναι μια δομή δεδομένων που λειτουργεί ως interface προγραμματισμού για το έγγραφο, όπου κάθε πτυχή του εγγράφου αναπαρίσταται ως node στο DOM και κάθε αλλαγή που γίνεται στο DOM αντανακλάται αμέσως στο έγγραφο. Για να δείξουμε πώς να χρησιμοποιήσετε το DOM στη JavaScript, αποθηκεύστε τον ακόλουθο κώδικα HTML σε ένα αρχείο που ονομάζεται example.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>HTML Manipulation with JavaScript</title>
</head>
<body>

<div class="content" id="content_first">
<p>The dynamic content goes here</p>
</div><!-- #content_first -->

<div class="content" id="content_second" hidden>
<p>Second section</p>
</div><!-- #content_second -->

</body>
</html>

Το DOM θα είναι διαθέσιμο μόνο μετά τη φόρτωση του HTML, επομένως γράψτε την ακόλουθη JavaScript στο τέλος του σώματος της σελίδας (πριν από την τελικό </body> tag):

<script>
let body = document.getElementsByTagName("body")[0];
console.log(body.innerHTML);
</script>

Το document object είναι το top DOM element, όλα τα άλλα elements προέρχονται από αυτό. Η μέθοδος getElementsByTagName() παραθέτει όλα τα elements που κατέρχονται από το document και έχουν το όνομα του δοθέντος tag. Παρόλο που το tag body χρησιμοποιείται μόνο μία φορά στο έγγραφο, η μέθοδος getElementsByTagName() επιστρέφει πάντα ένα array από elements που βρέθηκαν, για αυτό και επομένως χρησιμοποιείται ο δείκτης [0] για να επιστρέψει το πρώτο (και μόνο) element που βρέθηκε.

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

Όπως φαίνεται στο προηγούμενο παράδειγμα, το DOM element που επιστράφηκε από το document.getElementsByTagName("body")[0] εκχωρήθηκε στη μεταβλητή body. Η μεταβλητή body μπορεί στη συνέχεια να χρησιμοποιηθεί για να χειριστεί το body element της σελίδας, επειδή κληρονομεί όλες τις μεθόδους και τα DOM attributes από αυτό το element. Για παράδειγμα, η ιδιότητα innerHTML περιέχει ολόκληρο τον markup HTML κώδικα γραμμένο μέσα στο αντίστοιχο element, ώστε να μπορεί να χρησιμοποιηθεί για την ανάγνωση του εσωτερικού markup. Το console.log(body.innerHTML) εκτυπώνει το περιεχόμενο μέσα στο <body></body> στην web κονσόλα. Η μεταβλητή μπορεί επίσης να χρησιμοποιηθεί για την αντικατάσταση αυτού του περιεχομένου, όπως στο body.innerHTML = "<p>Content erased</p>".

Αντί να αλλάζετε ολόκληρα τμήματα του HTML markup, είναι πιο πρακτικό να διατηρείτε τη δομή του εγγράφου αναλλοίωτη και απλώς να αλληλεπιδράτε με τα elements του. Μόλις το έγγραφο αποδοθεί από το πρόγραμμα περιήγησης, όλα τα elements είναι προσβάσιμα με μεθόδους DOM. Είναι δυνατόν, για παράδειγμα, να παραθέσετε και να αποκτήσετε πρόσβαση σε όλα τα HTML elements χρησιμοποιώντας το ειδικό string * στη μέθοδο getElementsByTagName() του object document:

let elements = document.getElementsByTagName("*");
for ( element of elements )
{
  if ( element.id == "content_first" )
  {
    element.innerHTML = "<p>New content</p>";
  }
}

Αυτός ο κώδικας θα τοποθετήσει όλα τα elements που βρίσκονται στο document στη μεταβλητή elements. Η μεταβλητή elements είναι ένα object που μοιάζει με array, επομένως μπορούμε να επαναλάβουμε κάθε στοιχείο του με έναν for loop. Εάν η σελίδα HTML όπου εκτελείται αυτός ο κώδικας έχει ένα element με ένα id attribute που έχει οριστεί σε content_first (δείτε το δείγμα σελίδας HTML που εμφανίζεται στην αρχή του μαθήματος), το if statement ταιριάζει με αυτό το element και τα markup περιεχόμενά του θα αλλάξουν σε <p>New content</p>. Σημειώστε ότι τα attributes ενός HTML element στο DOM είναι προσβάσιμα χρησιμοποιώντας τη σημειογραφία dot των ιδιοτήτων ενός JavaScript object: επομένως, το element.id αναφέρεται στο id attribute του τρέχοντος element του for loop. Θα μπορούσε επίσης να χρησιμοποιηθεί η μέθοδος getAttribute(), όπως στο element.getAttribute("id").

Δεν είναι απαραίτητο να ελέγξετε όλα τα elements εάν θέλετε να επιθεωρήσετε μόνο ένα υποσύνολο από αυτά. Για παράδειγμα, η μέθοδος document.getElementsByClassName() περιορίζει τα elements σε αυτά που έχουν ένα συγκεκριμένο class:

let elements = document.getElementsByClassName("content");
for ( element of elements )
{
  if ( element.id == "content_first" )
  {
    element.innerHTML = "<p>New content</p>";
  }
}

Ωστόσο, ο έλεγχος πολλών elements του εγγράφου με χρήση loop δεν είναι η καλύτερη στρατηγική όταν πρέπει να αλλάξετε ένα συγκεκριμένο element στη σελίδα.

Επιλογή Συγκεκριμένων Elements

Η JavaScript παρέχει βελτιστοποιημένες μεθόδους για να επιλέξετε το ακριβές element πάνω στο οποίο θέλετε να εργαστείτε. Το προηγούμενο loop θα μπορούσε να αντικατασταθεί πλήρως από τη μέθοδο document.getElementById():

let element = document.getElementById("content_first");
element.innerHTML = "<p>New content</p>";

Κάθε id attribute στο έγγραφο πρέπει να είναι μοναδικό, επομένως η μέθοδος document.getElementById() επιστρέφει μόνο ένα DOM object. Ακόμη και η δήλωση της μεταβλητής element μπορεί να παραλειφθεί, επειδή η JavaScript μας επιτρέπει να ενώνουμε αλυσιδωτά μεθόδους απευθείας:

document.getElementById("content_first").innerHTML = "<p>New content</p>";

Η μέθοδος getElementById() είναι η προτιμώμενη μέθοδος για τον εντοπισμό elements στο DOM, επειδή η απόδοσή της είναι πολύ καλύτερη από τις μεθόδους επανάληψης κατά την εργασία με πολύπλοκα έγγραφα. Ωστόσο, δεν έχουν όλα τα elements ID και η μέθοδος επιστρέφει μια τιμή null εάν κανένα element δεν ταιριάζει με το παρεχόμενο ID (αυτό αποτρέπει επίσης τη χρήση αλυσιδωτής ένωσης attributes ή functions, όπως το innerHTML που χρησιμοποιείται στο παραπάνω παράδειγμα). Επιπλέον, είναι πιο πρακτικό να εκχωρείτε ID attributes μόνο στα κύρια στοιχεία της σελίδας και στη συνέχεια να χρησιμοποιείτε CSS selectors για να εντοπίσετε τα child elements τους.

Οι selectors, στους οποίους έγινε εισαγωγή σε ένα προηγούμενο μάθημα για το CSS, είναι μοτίβα που ταιριάζουν με elements στο DOM. Η μέθοδος querySelector() επιστρέφει το πρώτο element που ταιριάζει στο δέντρο του DOM, ενώ το querySelectorAll() επιστρέφει όλα τα elements που ταιριάζουν με τον καθορισμένο selector.

Στο προηγούμενο παράδειγμα, η μέθοδος getElementById() ανακτά το element που φέρει το ID content_first. Η μέθοδος "querySelector()" μπορεί να εκτελέσει την ίδια εργασία:

document.querySelector("#content_first").innerHTML = "<p>New content</p>";

Επειδή η μέθοδος querySelector() χρησιμοποιεί σύνταξη selector, το παρεχόμενο ID πρέπει να ξεκινά με έναν hash χαρακτήρα. Εάν δεν βρεθεί element που να ταιριάζει, η μέθοδος querySelector() επιστρέφει null.

Στο προηγούμενο παράδειγμα, ολόκληρο το περιεχόμενο του content_first div αντικαθίσταται από το string κειμένου που παρέχεται. Το string έχει HTML κώδικα, ο οποίος δεν θεωρείται βέλτιστη πρακτική. Πρέπει να είστε προσεκτικοί όταν προσθέτετε HTML markup στον JavaScript κώδικα, επειδή η παρακολούθηση των elements μπορεί να γίνει δύσκολη όταν απαιτούνται αλλαγές στη συνολική δομή του εγγράφου.

Οι selectors δεν περιορίζονται στο ID του element. Το εσωτερικό element p μπορεί να διαχειριστεί απευθείας:

document.querySelector("#content_first p").innerHTML = "New content";

Ο selector #content_first p θα ταιριάξει μόνο το πρώτο p element μέσα στο div #content_first. Λειτουργεί καλά αν θέλουμε να χειριστούμε το πρώτο element. Ωστόσο, μπορεί να θέλουμε να αλλάξουμε τη δεύτερη παράγραφο:

<div class="content" id="content_first">
<p>Don't change this paragraph.</p>
<p>The dynamic content goes here.</p>
</div><!-- #content_first -->

Σε αυτήν την περίπτωση, μπορούμε να χρησιμοποιήσουμε την ψευδοκλάση :nth-child(2) για να ταιριάξουμε το δεύτερο p element:

document.querySelector("#content_first p:nth-child(2)").innerHTML = "New content";

Ο αριθμός 2 στο p:nth-child(2) υποδηλώνει τη δεύτερη παράγραφο που ταιριάζει με τον selector. Δείτε το μάθημα των CSS selectors για να μάθετε περισσότερα σχετικά με τους selectors και τον τρόπο χρήσης τους.

Δουλεύοντας με Attributes

Η ικανότητα της JavaScript να αλληλεπιδρά με το DOM δεν περιορίζεται στη διαχείριση του περιεχομένου. Πράγματι, η πιο συχνή χρήση της JavaScript στο πρόγραμμα περιήγησης είναι η τροποποίηση των attributes των υπαρχόντων HTML elements.

Ας υποθέσουμε ότι η αρχική μας σελίδα παραδείγματος HTML, έχει τώρα τρεις ενότητες περιεχομένου:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>HTML Manipulation with JavaScript</title>
</head>
<body>

<div class="content" id="content_first" hidden>
<p>First section.</p>
</div><!-- #content_first -->

<div class="content" id="content_second" hidden>
<p>Second section.</p>
</div><!-- #content_second -->

<div class="content" id="content_third" hidden>
<p>Third section.</p>
</div><!-- #content_third -->

</body>
</html>

Μπορεί να θέλετε να κάνετε μόνο ένα από αυτά ορατό κάθε φορά, εξ' ου και το χαρακτηριστικό hidden σε όλες τα tags div. Αυτό είναι χρήσιμο, για παράδειγμα, για την εμφάνιση μόνο μιας εικόνας από μια συλλογή εικόνων. Για να κάνετε μία από αυτές ορατή κατά τη φόρτωση της σελίδας, προσθέστε τον ακόλουθο κώδικα JavaScript στη σελίδα:

// Which content to show
let content_visible;

switch ( Math.floor(Math.random() * 3) )
{
  case 0:
    content_visible = "#content_first";
  break;
  case 1:
    content_visible = "#content_second";
  break;
  case 2:
    content_visible = "#content_third";
  break;
}

document.querySelector(content_visible).removeAttribute("hidden");

Η έκφραση που αξιολογείται από το switch statement επιστρέφει τυχαία τον αριθμό 0, 1 ή 2. Στη συνέχεια, ο αντίστοιχος ID selector εκχωρείται στη μεταβλητή content_visible, η οποία χρησιμοποιείται από τη μέθοδο querySelector(content_visible). Η αλυσιδωτή κλήση removeAttribute("hidden") αφαιρεί το attribute hidden από το element.

Η αντίθετη προσέγγιση είναι επίσης δυνατή: Όλες οι ενότητες θα μπορούσαν αρχικά να είναι ορατές (χωρίς το attribute hidden) και το πρόγραμμα JavaScript μπορεί στη συνέχεια να εκχωρήσει το attribute hidden σε κάθε ενότητα εκτός από αυτό στο content_visible. Για να το κάνετε αυτό, πρέπει να προβείτε σε επανάληψη επί όλων των elements div περιεχομένου που είναι διαφορετικά από το επιλεγμένο, κάτι που μπορεί να γίνει χρησιμοποιώντας τη μέθοδο querySelectorAll():

// Which content to show
let content_visible;

switch ( Math.floor(Math.random() * 3) )
{
  case 0:
    content_visible = "#content_first";
  break;
  case 1:
    content_visible = "#content_second";
  break;
  case 2:
    content_visible = "#content_third";
  break;
}

// Hide all content divs, except content_visible
for ( element of document.querySelectorAll(".content:not("+content_visible+")") )
{
  // Hidden is a boolean attribute, so any value will enable it
  element.setAttribute("hidden", "");
}

Εάν η μεταβλητή content_visible ορίστηκε σε #content_first, ο selector θα είναι .content:not(#content_first), που διαβάζεται ως όλα τα elements που έχουν class content εκτός από αυτά που έχουν το ID content_first. Η μέθοδος setAttribute() προσθέτει ή αλλάζει attributes των HTML elements. Η πρώτη του παράμετρος είναι το όνομα του attribute και η δεύτερη είναι η τιμή του attribute.

Ωστόσο, ο σωστός τρόπος για να αλλάξετε την εμφάνιση των elements είναι με το CSS. Σε αυτήν την περίπτωση, μπορούμε να ορίσουμε την CSS ιδιότητα display σε hidden και στη συνέχεια να την αλλάξουμε σε block χρησιμοποιώντας JavaScript:

<style>
div.content { display: none }
</style>

<div class="content" id="content_first">
<p>First section.</p>
</div><!-- #content_first -->

<div class="content" id="content_second">
<p>Second section.</p>
</div><!-- #content_second -->

<div class="content" id="content_third">
<p>Third section.</p>
</div><!-- #content_third -->

<script>
// Which content to show
let content_visible;

switch ( Math.floor(Math.random() * 3) )
{
  case 0:
    content_visible = "#content_first";
  break;
  case 1:
    content_visible = "#content_second";
  break;
  case 2:
    content_visible = "#content_third";
  break;
}
document.querySelector(content_visible).style.display = "block";
</script>

Οι ίδιες καλές πρακτικές που ισχύουν για την ανάμειξη HTML tags με JavaScript ισχύουν και για το CSS. Επομένως, δεν συνιστάται το γράψιμο ιδιοτήτων CSS απευθείας σε κώδικα JavaScript. Αντίθετα, οι κανόνες CSS θα πρέπει να γράφονται χωριστά από τον κώδικα JavaScript. Ο σωστός τρόπος για να εναλλάσσετε το οπτικό styling είναι να επιλέξετε ένα προκαθορισμένο CSS class για το element.

Δουλεύοντας με Classes

Τα elements μπορεί να έχουν περισσότερα από ένα συσχετιζόμενα class, καθιστώντας ευκολότερη τη γραφή styles που μπορούν να προστεθούν ή να αφαιρεθούν όταν είναι απαραίτητο. Θα ήταν εξαντλητικό να αλλάξετε πολλά CSS attributes απευθείας στο JavaScript, ώστε να μπορείτε να δημιουργήσετε ένα νέο CSS class με αυτά τα attributes και στη συνέχεια να προσθέσετε το class στο element. Τα DOM elements έχουν την ιδιότητα classList, η οποία μπορεί να χρησιμοποιηθεί για την προβολή και τον χειρισμό των class που έχουν εκχωρηθεί στο αντίστοιχο element.

Για παράδειγμα, αντί να αλλάξουμε την ορατότητα του element, μπορούμε να δημιουργήσουμε ένα πρόσθετο CSS class για επισήμανση του content div:

div.content {
  border: 1px solid black;
  opacity: 0.25;
}
div.content.highlight {
  border: 1px solid red;
  opacity: 1;
}

Αυτό το stylesheet θα προσθέσει ένα λεπτό μαύρο περίγραμμα και ημιδιαφάνεια σε όλα τα elements που έχουν το class content. Μόνο τα elements που έχουν επίσης το class highlight θα είναι πλήρως αδιαφανή και θα έχουν το λεπτό κόκκινο περίγραμμα. Στη συνέχεια, αντί να αλλάξουμε απευθείας τις ιδιότητες CSS όπως κάναμε πριν, μπορούμε να χρησιμοποιήσουμε τη μέθοδο classList.add("highlight") στο επιλεγμένο element:

// Which content to highlight
let content_highlight;

switch ( Math.floor(Math.random() * 3) )
{
  case 0:
    content_highlight = "#content_first";
  break;
  case 1:
    content_highlight = "#content_second";
  break;
  case 2:
    content_highlight = "#content_third";
  break;
}

// Highlight the selected div
document.querySelector(content_highlight).classList.add("highlight");

Όλες οι τεχνικές και τα παραδείγματα που έχουμε δει μέχρι τώρα εκτελέστηκαν στο τελική φάση της διαδικασίας φόρτωσης της σελίδας, αλλά δεν περιορίζονται σε αυτό το στάδιο μόνο. Στην πραγματικότητα, αυτό που κάνει την JavaScript τόσο χρήσιμη για τους Web προγραμματιστές είναι η ικανότητά της να αντιδρά σε events στη σελίδα, την οποία θα δούμε στη συνέχεια.

Event Handlers

Όλα τα ορατά elements της σελίδας είναι επιδεκτικά σε διαδραστικά events, όπως το κλικ ή η κίνηση του ίδιου του ποντικιού. Μπορούμε να συσχετίσουμε προσαρμοσμένες ενέργειες σε αυτά τα events, γεγονός που διευρύνει σημαντικά το τι μπορεί να κάνει ένα έγγραφο HTML.

Πιθανώς το πιο προφανές HTML element που επωφελείται από μια συσχετιζόμενη ενέργεια είναι το element button. Για να δείξετε πώς λειτουργεί, προσθέστε τρία κουμπιά πάνω από το πρώτο div element της σελίδας του παραδείγματος:

<p>
<button>First</button>
<button>Second</button>
<button>Third</button>
</p>

<div class="content" id="content_first">
<p>First section.</p>
</div><!-- #content_first -->

<div class="content" id="content_second">
<p>Second section.</p>
</div><!-- #content_second -->

<div class="content" id="content_third">
<p>Third section.</p>
</div><!-- #content_third -->

Τα κουμπιά δεν κάνουν τίποτα από μόνα τους, αλλά ας υποθέσουμε ότι θέλετε να επισημάνετε το div που αντιστοιχεί στο πατημένο κουμπί. Μπορούμε να χρησιμοποιήσουμε το attribute onClick για να συσχετίσουμε μια ενέργεια σε κάθε κουμπί:

<p>
<button onClick="document.getElementById('content_first').classList.toggle('highlight')">First</button>
<button onClick="document.getElementById('content_second').classList.toggle('highlight')">Second</button>
<button onClick="document.getElementById('content_third').classList.toggle('highlight')">Third</button>
</p>

Η μέθοδος classList.toggle() προσθέτει το καθορισμένο class στο element εάν δεν υπάρχει και αφαιρεί αυτό το class εάν είναι ήδη παρόν. Εάν εκτελέσετε το παράδειγμα, θα δείτε ότι μπορούν να επισημανθούν ταυτόχρονα περισσότερα από ένα div. Για να επισημάνετε μόνο το div που αντιστοιχεί στο πατημένο κουμπί, είναι απαραίτητο να αφαιρέσετε το class highlight από τα άλλα div elements. Ωστόσο, εάν η προσαρμοσμένη ενέργεια είναι πολύ μεγάλη ή περιλαμβάνει περισσότερες από μία γραμμές κώδικα, είναι πιο πρακτικό να γράψετε ένα function χωριστά από το tag του element:

function highlight(id)
{
  // Remove the "highlight" class from all content elements
  for ( element of document.querySelectorAll(".content") )
  {
    element.classList.remove('highlight');
  }

  // Add the "highlight" class to the corresponding element
  document.getElementById(id).classList.add('highlight');
}

Όπως τα προηγούμενα παραδείγματα, αυτό το function μπορεί να τοποθετηθεί μέσα σε ένα tag <script> ή σε ένα εξωτερικό αρχείο JavaScript που σχετίζεται με το έγγραφο. Το function highlight καταργεί πρώτα το class highlight από όλα τα elements div που σχετίζονται με το class content και, στη συνέχεια, προσθέτει το class highlight στο επιλεγμένο element. Κάθε κουμπί θα πρέπει στη συνέχεια να καλεί αυτό το function από το attribute onClick, χρησιμοποιώντας το αντίστοιχο ID ως argument του function:

<p>
<button onClick="highlight('content_first')">First</button>
<button onClick="highlight('content_second')">Second</button>
<button onClick="highlight('content_third')">Third</button>
</p>

Εκτός από το attribute onClick, θα μπορούσαμε να χρησιμοποιήσουμε το attribute onMouseOver (ενεργοποιείται όταν η συσκευή χρησιμοποιείται για τη μετακίνηση του δρομέα επάνω στο element), το attribute onMouseOut (ενεργοποιείται όταν η συσκευή δεν βρίσκεται πλέον εντός του element) κ.λπ. Επιπλέον, τα event handlers δεν περιορίζονται σε κουμπιά, επομένως μπορείτε να αντιστοιχίσετε προσαρμοσμένες ενέργειες σ' αυτά τα event handlers για όλα τα ορατά HTML elements.

Καθοδηγούμενες Ασκήσεις

Χρησιμοποιώντας τη μέθοδο document.getElementById(), πώς θα μπορούσατε να εισαγάγετε τη φράση “Dynamic content” στο εσωτερικό περιεχόμενο του element του οποίου το ID είναι message;
Ποια είναι η διαφορά μεταξύ της αναφοράς ενός element με το ID του χρησιμοποιώντας τη μέθοδο document.querySelector() και της μεθόδου document.getElementById();
Ποιος είναι ο σκοπός της μεθόδου classList.remove();
Ποιο είναι το αποτέλεσμα της χρήσης της μεθόδου myelement.classList.toggle("active") εάν στο myelement δεν έχει εκχωρηθεί το class active;

Ασκήσεις Εξερεύνησης

Ποιο argument στη μέθοδο document.querySelectorAll() θα την κάνει να μιμείται τη μέθοδο document.getElementsByTagName("input");
Πώς μπορείτε να χρησιμοποιήσετε την ιδιότητα classList για να παραθέσετε όλες τα class που σχετίζονται με ένα δεδομένο element;

Σύνοψη

Αυτό το μάθημα καλύπτει τον τρόπο χρήσης JavaScript για την αλλαγή των HTML περιεχομένων και των CSS ιδιοτήτων τους χρησιμοποιώντας το DOM (Document Object Model). Αυτές οι αλλαγές μπορούν να ενεργοποιηθούν από events του χρήστη, κάτι που είναι χρήσιμο για τη δημιουργία δυναμικών interfaces. Το μάθημα περιλαμβάνει τις ακόλουθες έννοιες και διαδικασίες:

Πώς να επιθεωρήσετε τη δομή του εγγράφου χρησιμοποιώντας μεθόδους όπως document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(), document.querySelector() και `document.querySelectorAll() `.
Πώς να αλλάξετε το περιεχόμενο του εγγράφου με την ιδιότητα innerHTML.
Πώς να προσθέσετε και να τροποποιήσετε τα attributes των elements μιας σελίδας με τις μεθόδους setAttribute() και removeAttribute().
Το σωστό τρόπο χειρισμού των class των elements χρησιμοποιώντας την ιδιότητα classList και η σχέση της με τα CSS styles.
Πώς να συνδέσετε functions σε events του ποντικιού σε συγκεκριμένα elements.

Απαντήσεις στις Καθοδηγούμενες Ασκήσεις

Χρησιμοποιώντας τη μέθοδο document.getElementById(), πώς θα μπορούσατε να εισαγάγετε τη φράση “Dynamic content” στο εσωτερικό περιεχόμενο του element του οποίου το ID είναι message;

Μπορεί να γίνει με την ιδιότητα innerHTML:
```
document.getElementById("message").innerHTML = "Dynamic content"
```
Ποια είναι η διαφορά μεταξύ της αναφοράς ενός element με το ID του χρησιμοποιώντας τη μέθοδο document.querySelector() και της μεθόδου document.getElementById();

Το ID πρέπει να συνοδεύεται από τον χαρακτήρα hash σε functions που χρησιμοποιούν selectors, όπως document.querySelector().
Ποιος είναι ο σκοπός της μεθόδου classList.remove();

Αφαιρεί το class (το όνομα της οποίας δίνεται ως το argument του function) από το attribute class του αντίστοιχου element.
Ποιο είναι το αποτέλεσμα της χρήσης της μεθόδου myelement.classList.toggle("active") εάν στο myelement δεν έχει εκχωρηθεί το class active;

Η μέθοδος θα εκχωρήσει το class active στο myelement.

Απαντήσεις στις Ασκήσεις Εξερεύνησης

Ποιο argument στη μέθοδο document.querySelectorAll() θα την κάνει να μιμείται τη μέθοδο document.getElementsByTagName("input");

Η χρήση του document.querySelectorAll("input") θα ταιριάξει με όλα τα input elements στη σελίδα, όπως ακριβώς το document.getElementsByTagName("input").
Πώς μπορείτε να χρησιμοποιήσετε την ιδιότητα classList για να παραθέσετε όλες τα class που σχετίζονται με ένα δεδομένο element;

Η ιδιότητα classList είναι ένα object που μοιάζει με array, επομένως ένα for loop μπορεί να χρησιμοποιηθεί για επανάληψη επί όλων των class που περιέχει.