Documento HTML DOM JavaScript

L'oggetto documento HTML DOM è il proprietario di tutti gli altri oggetti nella vostra pagina web.

Oggetto Document HTML DOM

L'oggetto documento rappresenta la vostra pagina web.

Se desiderate accedere a qualsiasi elemento della pagina HTML, dovete sempre iniziare dall'oggetto document.

Di seguito ci sono alcuni esempi su come utilizzare l'oggetto document per accedere e manipolare l'HTML.

Trova l'elemento HTML

Metodo Descrizione
document.getElementById(id) Trova l'elemento tramite l'id dell'elemento
document.getElementsByTagName(nome) Trova l'elemento tramite il nome del tag
document.getElementsByClassName(nome) Trova l'elemento tramite il nome della classe

Modificare l'elemento HTML

Metodo Descrizione
element.innerHTML = nuovo contenuto HTML Modificare l'HTML interno dell'elemento
element.attribute = new value Cambia il valore dell'attributo dell'elemento HTML
element.setAttribute(attribute, value) Cambia il valore dell'attributo dell'elemento HTML
element.style.property = new style Cambia lo stile dell'elemento HTML

Aggiungi e elimina elementi

Metodo Descrizione
document.createElement(element) Crea l'elemento HTML
document.removeChild(element) Elimina l'elemento HTML
document.appendChild(element) Aggiungi l'elemento HTML
document.replaceChild(element) Sostituisci l'elemento HTML
document.write(text) Scrivi lo stream di output HTML

Aggiungi un gestore di eventi

Metodo Descrizione
document.getElementById(id).onclick = function(){code} Aggiungi un gestore di eventi all'evento onclick

Ricerca degli oggetti HTML

Primo HTML DOM Level 1 (1998), ha definito 11 oggetti HTML, collection di oggetti e proprietà. Essi sono ancora validi in HTML5.

Successivamente, in HTML DOM Level 3, sono stati aggiunti più oggetti, collection e proprietà.

Proprietà Descrizione DOM
document.anchors Restituisce tutti gli elementi <a> con l'attributo name. 1
document.applets Restituisce tutti gli elementi <applet>(Non raccomandato in HTML5) 1
document.baseURI Restituisce l'URI di base assoluto del documento 3
document.body Restituisce l'elemento <body> 1
document.cookie Restituisce i cookie del documento 1
document.doctype Restituisce il doctype del documento 3
document.documentElement Restituisce l'elemento <html> 3
document.documentMode Restituisce il modello utilizzato dal browser 3
document.documentURI Restituisce l'URI del documento 3
document.domain Restituisce il dominio del server del documento 1
document.domConfig Disattivato.Restituisce la configurazione DOM 3
document.embeds Restituisce tutti gli elementi <embed> 3
document.forms Restituisce tutti gli elementi <form> 1
document.head Restituisce l'elemento <head> 3
document.images Restituisce tutti gli elementi <img> 1
document.implementation Restituisce l'implementazione DOM 3
document.inputEncoding Restituisce la codifica del documento (set di caratteri) 3
document.lastModified Restituisce la data e l'ora dell'aggiornamento del documento 3
document.links Restituisce tutti gli elementi <area> e <a> con l'attributo href 1
document.readyState Restituisce lo stato del documento (caricamento) 3
document.referrer Restituisce l'URI citato (documento linkato) 1
document.scripts Restituisce tutti gli elementi <script> 3
document.strictErrorChecking Restituisce se viene eseguita la verifica degli errori forzati 3
document.title Restituisce l'elemento <title> 1
document.URL Restituisce l'URL completo del documento 1