Module 11 -- Le DOM : La Carte de la Ville

// Par ID (unique)
const titre = document.getElementById('titre-principal');

// Par classe (collection live)
const cameras = document.getElementsByClassName('camera');

// Par balise
const boutons = document.getElementsByTagName('button');

// Premier élément correspondant
const camera = document.querySelector('.camera.active');

// Tous les éléments correspondants
const toutesCameras = document.querySelectorAll('.camera');

// Sélections complexes
const camActives = document.querySelectorAll('.camera.active:not(.offline)');
const premierLi = document.querySelector('ul > li:first-child');

// Créer un élément
const nouvelleDiv = document.createElement('div');
nouvelleDiv.className = 'camera';
nouvelleDiv.textContent = 'Camera #1';

// Créer avec dataset
nouvelleDiv.dataset.id = 'cam-001';
nouvelleDiv.dataset.status = 'active';

const container = document.getElementById('container');

// À la fin
container.appendChild(nouvelleDiv);

// Avant un élément
const reference = document.querySelector('.reference');
container.insertBefore(nouvelleDiv, reference);

// Positions précises
reference.insertAdjacentElement('beforebegin', nouvelleDiv); // Avant
reference.insertAdjacentElement('afterend', nouvelleDiv);   // Après

// Méthode moderne
element.remove();

// Ancienne méthode
parent.removeChild(element);

// Remplacer
parent.replaceChild(nouveau, ancien);

const clone = element.cloneNode(true); // true = avec enfants

// Sécurisé (échappe le HTML)
element.textContent = '<script>alert("xss")</script>';
// Affiche: <script>alert("xss")</script>

// Dangereux (exécute le HTML)
element.innerHTML = '<strong>Nouveau</strong> contenu';

const el = document.querySelector('.camera');

el.classList.add('active', 'enregistrement');
el.classList.remove('offline');
el.classList.toggle('cache');
el.classList.contains('active'); // true/false
el.classList.replace('vieux', 'nouveau');

// Standard
el.setAttribute('src', 'image.jpg');
const src = el.getAttribute('src');
el.removeAttribute('alt');

// Data attributes (recommandé)
el.dataset.cameraId = '123';
el.dataset.status = 'active';
console.log(el.dataset.cameraId); // '123'

el.style.color = 'red';
el.style.backgroundColor = '#000';
el.style.display = 'none';

const enfant = document.querySelector('.enfant');

// Parents
enfant.parentElement;
enfant.closest('.parent-selector'); // Le plus proche correspondant

// Enfants
parent.children;      // Éléments seulement
parent.childNodes;    // Tous les nœuds (texte, commentaires)
parent.firstElementChild;
parent.lastElementChild;

// Frères
enfant.previousElementSibling;
enfant.nextElementSibling;

const bouton = document.querySelector('button');

function handleClick(event) {
  console.log('Clic!', event.target);
  event.preventDefault(); // Empêche comportement par défaut
}

bouton.addEventListener('click', handleClick);
bouton.removeEventListener('click', handleClick); // Même fonction requise

// Écouter sur un parent stable
document.addEventListener('click', (event) => {
  if (event.target.matches('.btn-dynamique')) {
    console.log('Bouton dynamique cliqué');
  }
  
  // Si le bouton a des enfants
  const bouton = event.target.closest('.btn-dynamique');
  if (bouton) {
    console.log('Bouton trouvé via closest');
  }
});

// Souris
'click', 'dblclick', 'mousedown', 'mouseup', 'mousemove'

// Clavier
'keydown', 'keyup'

// Formulaire
'submit', 'change', 'input', 'focus', 'blur'

// Document
'DOMContentLoaded', 'load', 'resize', 'scroll'

// Créer
const event = new CustomEvent('alerte', {
  detail: { message: 'Intrusion!' },
  bubbles: true
});

// Déclencher
element.dispatchEvent(event);

// Écouter
element.addEventListener('alerte', (e) => {
  console.log(e.detail.message);
});

<div class="surveillance">
  <div id="cameras"></div>
  <button id="ajouter">Ajouter Caméra</button>
  <div id="logs"></div>
</div>

class SurveillanceSystem {
  constructor() {
    this.cameras = [];
    this.init();
  }
  
  init() {
    this.container = document.getElementById('cameras');
    this.btnAjouter = document.getElementById('ajouter');
    this.logs = document.getElementById('logs');
    
    this.btnAjouter.addEventListener('click', () => this.ajouterCamera());
    
    // Délégation pour les boutons dynamiques
    this.container.addEventListener('click', (e) => {
      if (e.target.classList.contains('btn-remove')) {
        this.supprimerCamera(e.target.closest('.camera'));
      }
    });
  }
  
  ajouterCamera() {
    const id = this.cameras.length + 1;
    
    // Créer l'élément
    const camera = document.createElement('div');
    camera.className = 'camera active';
    camera.dataset.id = id;
    
    // Contenu
    camera.innerHTML = `
      <h3>Camera ${id}</h3>
      <p>Status: <span class="status">active</span></p>
      <button class="btn-toggle">Toggle</button>
      <button class="btn-remove">×</button>
    `;
    
    // Ajouter au DOM
    this.container.appendChild(camera);
    this.cameras.push(camera);
    
    // Log
    this.log(`Camera ${id} ajoutée`);
  }
  
  supprimerCamera(cameraEl) {
    cameraEl.remove();
    this.log(`Camera ${cameraEl.dataset.id} supprimée`);
  }
  
  log(message) {
    const entry = document.createElement('div');
    entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
    this.logs.prepend(entry);
  }
}

// Initialisation
document.addEventListener('DOMContentLoaded', () => {
  new SurveillanceSystem();
});