L'oggetto document in JavaScript

L'oggetto document in JavaScript è una parte fondamentale del modello di oggetti del documento (DOM) e rappresenta l'intero documento HTML.

A cosa serve? Posso utilizzarlo per manipolare e interagire con il contenuto della pagina web. Il DOM è la rappresentazione strutturata della pagina web, quindi manipolare il DOM significa manipolare visivamente la pagina web. Tramite questo oggetto posso accedere agli elementi HTML, alle loro proprietà e metodi all'interno della tua pagina.

Per accedere agli elementi di un documento posso i metodi dell'oggetto Document.

Esistono due metodi fondamentali per trovare elementi all'interno di una pagina HTML tramite JavaScript, utilizzando l'oggetto "Document".

• getElementById(idValue):
  Questo metodo restituisce un riferimento (un nodo) a un elemento specifico nella pagina HTML. Richiede come argomento il valore dell'attributo "id" dell'elemento HTML che si desidera trovare. Ad esempio, se ho un elemento nella pagina HTML con un attributo id, come <div id="prova">...</div>, posso scrivere

  document.getElementById("prova")

  per ottenere un riferimento a quel particolare elemento. Se non esiste un elemento con l'id specificato, il metodo restituirà un valore nullo (null).
• getElementsByTagName(tagName):
  Questo metodo restituisce un riferimento (una lista di nodi) a tutti gli elementi che hanno lo stesso nome di tag che ho specificato nell'argomento. Richiede come argomento il nome di un tag HTML, come "div", "p", "h1", ecc. Ad esempio, se voglio trovare tutti gli elementi <p> della pagina, scrivo

  document.getElementsByTagName("p")

  Il metodo mi restituisce la lista di nodi con tutti gli elementi <p> presenti nella pagina. Se non trova alcun elemento, restituisce una lista vuota.

Questi due metodi sono essenziali per la manipolazione del DOM in JavaScript.

Mi permettono di accedere agli elementi della pagina, modificarli, aggiungere event listeners, cambiare stili, e molto altro, rendendo la pagina web dinamica e interattiva.

Lista dei metodi e delle proprietà

Ecco alcuni dei metodi e delle proprietà più comuni dell'oggetto document:

• document.images
  E' la collezione delle immagini. Restituisce un array con le immagini presenti nel documento HTML.
• document.links
  E' la collezione dei link. Restituisce un array con tutti i link presenti nel documento.
• document.getElementById(id)
  restituisce l'elemento che ha l'ID specificato
• document.getElementsByClassName(nomeClasse)
  restituisce una collezione di tutti gli elementi nel documento con il nome di classe specificato.
• document.getElementsByTagName(nomeTag)
  restituisce una collezione di tutti gli elementi nel documento con il nome del tag specificato.
• document.querySelector(selettoreCSS)
  restituisce il primo elemento che corrisponde al selettore CSS specificato.
• document.querySelectorAll(selettoreCSS)
  restituisce tutti gli elementi nel documento che corrispondono al selettore CSS specificato.
• document.createElement(nomeTag)
  crea un nuovo elemento con il nome del tag specificato.
• document.createTextNode(testo)
  crea un nuovo nodo di testo con il testo specificato.
• appendChild(node)
  Aggiunge un nodo come ultimo figlio di un nodo.
• removeChild(node)
  Rimuove un figlio dal nodo specificato.
• replaceChild(newNode, oldNode)
  Sostituisce un nodo figlio con un nuovo nodo.
• addEventListener(type, listener)
  Aggiunge un listener di eventi a un elemento.
• removeEventListener(type, listener)
  Rimuove un listener di eventi da un elemento.
• write(htmlString)
  Scrive HTML direttamente in un documento.
• execCommand(commandName)
  Esegue un comando sul contenuto corrente, come "copy" o "paste".

Questi sono solo alcuni esempi delle molte funzionalità che l'oggetto document offre per manipolare e interagire con il DOM.

E così via.