logo logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

DOM e l'oggetto document

L'oggetto document è uno dei metodi più utilizzati con il DOM e JavaScript. Quando viene caricata una pagina web, il codice HTML viene salvato nell'oggetto document. In questa lezione, vediamo come utilizzarlo e quali sono le proprietà e i metodi disponibili.

Sintassi dell'oggetto

Si può accedere all'oggetto document utilizzando la sintassi window.document o document. Ad esempio, proviamo ad utilizzare la proprietà title, che restituisce il titolo del documento.

<html>
  <head>
    <title>Pagina di esempio</title>
  </head>
  <body>

    <script>
    alert(document.title);  // Risultato: "Pagina di esempio"
    alert(window.document.title);  // Risultato: "Pagina di esempio"
    </script>

  </body>
</html>

Lista dei metodi più importanti

La lista di seguito contiene i metodi più importanti. 

Proprietà / MetodoDescrizione
body Restituisce il contenuto del corpo del documento HTML.
cookie Restituisce i cookie associati al documento.
createAttribute() Crea un nuovo attributo.
createComment() Crea un nuovo commento.
createElement() Crea un nuovo elemento HTML.
doctype Restituisce il tipo di documento (doctype) del documento HTML.
domain Restituisce il dominio del server dell'URL della pagina.
head Restituisce l'elemento del documento.
readyState Restituisce lo stato di carica del documento.
title Restituisce il titolo del documento.
URL Restituisce l'URL del documento.

Vediamo i metodi e le proprietà in dettaglio.

La proprietà body

La proprietà body modifica o restituisce il contenuto di <body>.

<html>
  <body>
    <h1>Pagina web in JavaScript</h1>
    <script>
    alert(document.body.innerHTML);  // Risultato: tutto l'HTML della pagina
    document.body.style.color = "red";  // Risultato: tutte le scritte diventano rosse
    </script>

  </body>
</html>

Nota: puoi approfondire gli stili CSS con il DOM nella lezione DOM e gli stili CSS.

La proprietà cookie

La proprietà cookie restituisce il contenuto di tutti i cookie.

<html>
  <body>

    <script>
    alert(document.cookie);
    </script>

  </body>
</html>

Il metodo createAttribute()

Il metodo createAttribute() permette di creare un attributo, che può essere aggiunto ad un elemento.

Sintassi: createAttribute(nome_attributo).

<html>
  <body>
    <p id="titolo">Una pagina modificata con JavaScript</p>

    <script>
    // Creare l'attributo
    let attributo = document.createAttribute("style");

    // Aggiungere un valore
    attributo.value = "font-size:30px";

    // Aggiungere l'attributo all'elemento "titolo"
    document.getElementById("titolo").setAttributeNode(attributo);
    </script>

  </body>
</html>

Il metodo setAttributeNode() serve per aggiungere l'attributo all'elemento. Un modo più semplice per aggiungere un attributo è utilizzare setAttribute(), che puoi leggere qui: DOM e attributi HTML.

Il metodo createComment()

Il metodo createComment() serve per aggiungere un commento all'interno di un elemento.

Sintassi: createComment(commento).

<html>
  <body>
    <h1 id="titolo">Una pagina modificata con JavaScript</h1>

    <script>
    // Creare il commmento
    let commento = document.createComment("Un commento");

    // Aggiungere il commento nell'elemento "titolo"
    document.getElementById("titolo").appendChild(commento);
    </script>

  </body>
</html>

Come sappiamo, i commenti non sono visibili nella pagina web, ma soltanto nel codice HTML. Nell'esempio, abbiamo utilizzato appendChild() che aggiunge un elemento all'interno di un altro.

Il metodo createElement()

Il metodo createElement() permette di creare un elemento che, successivamente, si può inserire nell'HTML.

Sintassi: createElement(nome_tag).

<html>
  <body>
    <div id="paragrafo">
      <p>Una pagina modificata con JavaScript</p>
    </div>

    <script>
    // Creare l'elemento
    let elemento = document.createElement("p");

    // Aggiungere il contenuto
    elemento.textContent = "Abbiamo utilizzato createElement()";

    // Aggiungere l'elemento nell'elemento "titolo"
    document.getElementById("paragrafo").appendChild(elemento);
    </script>

  </body>
</html>

Nell'esempio, si utilizza textContent() per aggiungere il testo all'elemento

Nota: puoi approfondire i contenuti del DOM dando un'occhiata alla lezione DOM e contenuto HTML.

La proprietà doctype

La proprietà doctype restituisce il doctype della pagina HTML. Si può utilizzare la sotto-proprietà name per restituire il valore del tag.

<!DOCTYPE html>
<html>
  <body>
    
    <script>
    alert(document.doctype.name);  // Risultato: "html"
    </script>

  </body>
</html>

Le proprietà domain, title e URL

Le proprietà domain, title e URL restituiscono rispettivamente il dominio, il titolo e l'URL della pagina web.

<!DOCTYPE html>
<html>
  <head>
    <title>Una pagina web</title>
  </head>

  <body>
    
    <script>
    alert(document.domain);  // Risultato: il dominio, ad esempio "biadets.com"
    alert(document.title);  // Risultato: "Una pagina web"
    alert(document.URL)  // Risultato: l'URL completo
    </script>

  </body>
</html>

La proprietà head

La proprietà head modifica o restituisce il contenuto di <head>.

<!DOCTYPE html>
<html>
  <head>
    <title>Una pagina web</title>
  </head>

  <body>
    
    <script>
    alert(document.head.innerHTML);  // <title>Una pagina web</head>
    </script>

  </body>
</html>

La proprietà readyState

La proprietà readyState restituisce lo stato di caricamento della pagina:

  • uninitialized: non è ancora iniziato il caricamento della pagina.
  • loading: è iniziato il caricamento della pagina.
  • loaded: la pagina è stata caricata.
  • interactive: la pagina è stata caricata abbastanza per essere interattiva.
  • complete: la pagina è stata caricata completamente.

<!DOCTYPE html>
<html>
  <body>
    
    <script>
    alert(document.readyState);
    </script>

  </body>
</html>

Prova!Completa gli spazi vuoti con il testo appropriato.
// Recupera l'url della pagina
document.;

Prova!Scegli l'opzione corretta tra quelle elencate.
// Dai il colore giallo al testo del <body>
document._____________ = "yellow";