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à / Metodo | Descrizione |
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>