Nextra

Che Cos’è il CSSOM?

Il CSS Object Model (CSSOM) è un concetto fondamentale e parallelo al Document Object Model (DOM) nel mondo dello sviluppo web. Mentre il DOM si concentra sulla struttura e sul contenuto di una pagina web, il CSSOM si occupa dell’aspetto e dello stile. Ecco alcuni punti chiave per capire meglio il CSSOM:

Definizione: Il CSSOM è una rappresentazione di tutti gli stili CSS associati a un documento web. Così come il DOM rappresenta la struttura del documento, il CSSOM rappresenta la struttura stilistica, includendo le regole CSS e le loro relazioni con gli elementi del DOM.
Interazione con il DOM: Il CSSOM e il DOM lavorano insieme per rendere visibile e stilisticamente coerente una pagina web nel browser. Mentre il DOM rappresenta la struttura del documento, il CSSOM definisce come quella struttura dovrebbe essere visualizzata.

Caratteristiche del CSSOM

Accesso e Manipolazione: Il CSSOM permette ai programmatori di accedere e manipolare dinamicamente gli stili di una pagina utilizzando JavaScript. Ciò include la possibilità di leggere e modificare regole CSS, come cambiare colori, dimensioni, margini, e altre proprietà stilistiche.
Reflow e Repaint: Qualsiasi modifica al CSSOM può causare un reflow e un repaint della pagina, simile a quanto accade con il DOM. Questo significa che le modifiche agli stili possono avere impatti significativi sulle prestazioni della pagina, poiché il browser deve ricalcolare e ridisegnare gli elementi.

Utilizzo del CSSOM

Modifica Dinamica degli Stili: Gli sviluppatori possono usare JavaScript per cambiare gli stili di una pagina in risposta a eventi o azioni dell’utente. Ad esempio, cambiare il colore di sfondo di un elemento quando viene cliccato.
Ottimizzazione delle Prestazioni: Una buona comprensione del CSSOM è fondamentale per ottimizzare le prestazioni di una pagina web. Modifiche inefficaci agli stili possono portare a rallentamenti, specialmente in pagine complesse.

Considerazioni sul CSSOM

Complessità: Il CSSOM può diventare piuttosto complesso, specialmente in grandi applicazioni web con molti stili CSS dinamici.
Prestazioni: È importante fare attenzione a come si interagisce con il CSSOM. Operazioni frequenti e inutili possono influenzare negativamente le prestazioni del sito.

Il CSS Object Model (CSSOM) non è un oggetto JavaScript nel senso tradizionale, ma piuttosto una rappresentazione ad oggetti delle foglie di stile utilizzata dai browser per applicare gli stili CSS ai documenti web. Tuttavia, può essere manipolato tramite JavaScript.

Per chiarire:

Rappresentazione a Oggetti: Il CSSOM è una rappresentazione strutturata, sotto forma di oggetti, delle foglie di stile CSS. Questo modello a oggetti permette ai browser di interpretare e applicare gli stili ai nodi corrispondenti nel DOM.
Interazione tramite JavaScript: Sebbene il CSSOM stesso non sia un oggetto JavaScript, può essere accessibile e modificabile attraverso JavaScript. Questo significa che gli sviluppatori possono utilizzare JavaScript per interrogare e manipolare dinamicamente gli stili di una pagina. Ad esempio, attraverso JavaScript, è possibile modificare proprietà come element.style.color o accedere a regole CSS tramite document.styleSheets.
Differenza dal DOM: Mentre il DOM si concentra sulla struttura del contenuto della pagina (come gli elementi HTML), il CSSOM si concentra sugli stili applicati a quegli elementi. Entrambi sono accessibili e manipolabili tramite JavaScript, ma servono a scopi diversi.
Non Direttamente Un Oggetto JavaScript: È importante notare che il CSSOM non è un oggetto JavaScript nel senso di oggetti definiti dall’utente o oggetti nativi come Date o Math. Piuttosto, è una parte dell’API Web fornita dai browser per lavorare con il CSS.

In sintesi, il CSSOM è una rappresentazione a oggetti delle foglie di stile di un documento che interagisce con il DOM per renderizzare le pagine web. Gli sviluppatori possono utilizzare JavaScript per manipolare il CSSOM, anche se esso stesso non è un oggetto JavaScript nel senso convenzionale.

Esempio HTML con CSS Incorporato

Per illustrare come il CSS Object Model (CSSOM) funziona in una pagina web, prendiamo un semplice esempio HTML con CSS incorporato e vediamo come potrebbe essere rappresentato e manipolato nel CSSOM. Immaginiamo di avere il seguente codice HTML con stile CSS incorporato:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      p {
        color: navy;
      }
    </style>
  </head>
  <body>
    <p>Benvenuto nel mondo di JavaScript e CSSOM!</p>
  </body>
</html>

In questo esempio, abbiamo definito due regole CSS nel tag <style> all’interno dell’<head>: una per lo sfondo del <body> e una per il colore del testo dei tag <p>.

Rappresentazione nel CSSOM

Quando il browser carica questa pagina, analizza il CSS e costruisce il CSSOM, una rappresentazione a oggetti di queste regole CSS. Il CSSOM per questa pagina potrebbe essere rappresentato internamente in un modo simile a questo (semplificato per scopi illustrativi):

CSSOM
│
└─── CSSStyleSheet
     │
     ├─── CSSRuleList
     │    │
     │    ├─── CSSRule: body { background-color: lightblue; }
     │    │
     │    └─── CSSRule: p { color: navy; }
     │
     └─── (altri dettagli del foglio di stile)

Ogni regola CSS (body { background-color: lightblue; } e p { color: navy; }) è rappresentata come un oggetto all’interno del CSSRuleList del CSSStyleSheet.

Manipolazione del CSSOM con JavaScript

Se vogliamo modificare dinamicamente gli stili utilizzando JavaScript, possiamo farlo manipolando il CSSOM. Ad esempio, possiamo cambiare il colore di sfondo del corpo della pagina:

document.body.style.backgroundColor = "peachpuff";

Questo codice JavaScript cambierà direttamente lo stile del <body> modificando il CSSOM. Il browser poi rileverà questa modifica e renderizzerà di nuovo la pagina con il nuovo colore di sfondo. Analogamente, possiamo modificare il colore del testo dei paragrafi in questo modo:

var paragrafi = document.querySelectorAll("p");
for (var p of paragrafi) {
  p.style.color = "green";
}

Questo script selezionerà tutti gli elementi <p> della pagina e cambierà il loro colore in verde.

DOM Git