L'oggetto documento HTML DOM è il proprietario di tutti gli altri oggetti nella vostra pagina web.
L'oggetto HTML DOM Document
L'oggetto documento rappresenta la vostra pagina web.
Se si vuole accedere a qualsiasi elemento in una pagina HTML, si inizia sempre con l'accesso al documento oggetto.
Di seguito sono riportati alcuni esempi di come è possibile utilizzare l'oggetto documento per accedere e manipolare HTML.
Alla ricerca di elementi HTML
| metodo | Descrizione |
|---|---|
| document.getElementById( id ) | Trova un elemento per elemento id |
| document.getElementsByTagName( name ) | Trova elementi per nome tag |
| document.getElementsByClassName( name ) | Trova elementi in base al nome della classe |
Cambiare Elementi HTML
| metodo | Descrizione |
|---|---|
| element .innerHTML = new html content | Modificare il codice HTML interno di un elemento |
| element . attribute = new value | Modificare il valore attributo di un elemento HTML |
| element .setAttribute (attribute, value) | Modificare il valore attributo di un elemento HTML |
| element .style. property = new style | Modificare lo stile di un elemento HTML |
Aggiunta ed eliminazione di elementi
| metodo | Descrizione |
|---|---|
| document.createElement( element ) | Creare un elemento HTML |
| document.removeChild( element ) | Rimuovere un elemento HTML |
| document.appendChild( element ) | Aggiungere un elemento HTML |
| document.replaceChild( element ) | Sostituire un elemento HTML |
| document.write( text ) | Scrivere nel flusso di output HTML |
Aggiunta Eventi gestori
| metodo | Descrizione |
|---|---|
| document.getElementById( id ).onclick = function(){ code } | L'aggiunta di codice del gestore eventi a un onclick evento |
Ricerca di oggetti HTML
La prima HTML DOM Level 1 (1998), ha definito gli oggetti 11 HTML, collezioni di oggetti e proprietà. Questi sono ancora valide in HTML5.
Più tardi, in HTML DOM Level 3, sono stati aggiunti altri oggetti, collezioni, e le proprietà.
| Proprietà | Descrizione | DOM |
|---|---|---|
| document.anchors | Restituisce tutti <a> elementi che hanno un attributo name | 1 |
| document.applets | Restituisce tutti <applet> elementi (sconsigliato in HTML5) | 1 |
| document.baseURI | Restituisce l'URI di base assoluto del documento | 3 |
| document.body | Restituisce il <body> elemento | 1 |
| document.cookie | Restituisce biscotto del documento | 1 |
| document.doctype | Restituisce DOCTYPE del documento | 3 |
| document.documentElement | Restituisce il <html> elemento | 3 |
| document.documentMode | Restituisce la modalità utilizzata dal browser | 3 |
| document.documentURI | Restituisce l'URI del documento | 3 |
| document.domain | Restituisce il nome di dominio del server di documenti | 1 |
| document.domConfig | Obsoleto. Restituisce la configurazione del DOM | 3 |
| document.embeds | Restituisce tutti <embed> elementi | 3 |
| document.forms | Restituisce tutti <form> elementi | 1 |
| document.head | Restituisce il <head> elemento | 3 |
| document.images | Restituisce tutti <img> elementi | 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 il documento è stato aggiornato | 3 |
| document.links | Restituisce tutti <area> e <a> elementi che hanno un attributo href | 1 |
| document.readyState | Restituisce lo stato (carico) del documento | 3 |
| document.referrer | Restituisce l'URI del referrer (il documento di collegamento) | 1 |
| document.scripts | Restituisce tutti <script> elementi | 3 |
| document.strictErrorChecking | Restituisce se il controllo degli errori viene applicata | 3 |
| document.title | Restituisce il <title> elemento | 1 |
| document.URL | Restituisce l'URL completo del documento | 1 |