DOM (Document Object Model)

Το DOM (Document Object Model) είναι μια έννοια στον προγραμματισμό ιστοσελίδων, επιτρέποντάς σου να διαχειρίζεσαι το περιεχόμενο και τη δομή ενός εγγράφου HTML ή XML δυναμικά μέσω JavaScript. Το DOM αναπαριστά το έγγραφο ως ένα δέντρο κόμβων, όπου κάθε κόμβος είναι ένα στοιχείο της ιστοσελίδας, όπως ένα στοιχείο HTML (π.χ. div, p, a), ένα κείμενο ή ένα σχόλιο.

Παράδειγμα

Αν η HTML μιας σελίδας είναι:

<!DOCTYPE html>
<html>
  <head>
    <title>Τίτλος Σελίδας</title>
  </head>
  <body>eventlisteners
    <h1>Καλώς ήρθατε</h1>
    <p>Αυτή είναι μια παράγραφος.</p>
  </body>
</html>

Η δομή του DOM για αυτήν την HTML θα μοιάζει με το εξής δέντρο:

Document
   └── html
       ├── head
       │   └── title (Τίτλος Σελίδας)
       └── body
           ├── h1 (Καλώς ήρθατε)
           └── p (Αυτή είναι μια παράγραφος)

Επιλογή Στοιχείων (Selecting Elements)

Για να κάνεις αλλαγές στο DOM, πρέπει πρώτα να επιλέξεις το στοιχείο που θέλεις να τροποποιήσεις.

Μέθοδοι Επιλογής Στοιχείων

getElementById: Επιλέγει ένα στοιχείο με βάση το id.
```
document.getElementById('title');
```
getElementsByClassName: Επιλέγει όλα τα στοιχεία που έχουν την ίδια κλάση (class).
```
document.getElementsByClassName('text');
```
getElementsByTagName: Επιλέγει όλα τα στοιχεία με συγκεκριμένο tag (π.χ. div, p).
querySelector και querySelectorAll: Επιλέγει στοιχεία με CSS-like selectors (π.χ. #id, .class, div > p).
```
document.querySelector('.text');
```

Τροποποίηση Περιεχομένου (Modifying Content)

textContent: Τροποποιεί το κείμενο του στοιχείου.

// Επιλογή του τίτλου
const titleElement = document.getElementById('title');
// Τροποποίηση κειμένου
titleElement.textContent = 'DOM Manipulation with JavaScript';

innerHTML: Τροποποιεί το HTML περιεχόμενο του στοιχείου (προσοχή για XSS επιθέσεις).

        const paragraphElement = document.querySelector('.text');
paragraphElement.innerHTML = '<strong>This paragraph is now bold!';

setAttribute και getAttribute: Τροποποιούν ή επιστρέφουν τα attributes του στοιχείου.

Δημιουργία και Προσθήκη Στοιχείων (Creating and Adding Elements)

Δημιουργία νέου στοιχείου με createElement.
Προσθήκη περιεχομένου στο νέο στοιχείο.
Τοποθέτηση του νέου στοιχείου στο DOM χρησιμοποιώντας appendChild ή insertBefore.

<html>
<head>
    <title>GrCode Club</title>
</head>
<body>
    <div id="container"></div>
    <script>
        // Επιλογή του container
        const container = document.getElementById('container');

        // Δημιουργία νέου στοιχείου div
        const newDiv = document.createElement('div');

        // Προσθήκη κειμένου στο νέο div
        newDiv.textContent = 'This is a new div element';

        // Προσθήκη του νέου div στο DOM
        container.appendChild(newDiv);
    </script>
</body>
</html>

Διαγραφή Στοιχείων (Removing Elements)

Μπορείς να αφαιρέσεις στοιχεία από το DOM χρησιμοποιώντας τις μεθόδους removeChild ή remove.

// Επιλογή του στοιχείου που θα αφαιρεθεί
const elementToRemove = document.getElementById('toBeRemoved');
// Αφαίρεση του στοιχείου από τον γονέα του
elementToRemove.remove();