Introduzione al DOM

Qualunque azione eseguiamo su una pagina web HTML come cambiare un elemento, cambiare gli attributi di un elemento o cambiare lo stile di un elemento usando un linguaggio di scripting, viene eseguito con l'aiuto del DOM. Questo perché il linguaggio di scripting non può accedere all'elemento HTML da solo, ecco perché richiede un'interfaccia media che collega il linguaggio di script con l'elemento HTML.

DOM può essere chiamato la struttura del documento in cui il documento può essere una pagina Web HTML o una pagina XML. In questo post, sapremo cos'è Dom, come lavorare con gli spettatori di DOM e come accedere agli elementi con un linguaggio di scripting.

Cos'è Dom?

DOM sta per il modello a oggetti documenti ed è considerato uno standard per l'accesso, la modifica e l'eliminazione degli elementi dal documento. Questo standard è impostato dal W3C (World Wide Web Consortium) Ed è per questo che DOM è più comunemente indicato come W3C DOM. Il World Wide Web Consortium ha definito DOM come un'interfaccia che aiuta le lingue a interagire con un documento pur rimanendo neutro.

IL Documento In DOM sta per un documento che può essere un documento HTML o un documento XML. IL Oggetto In DOM viene utilizzato per fare riferimento a elementi o nodi del documento. Mentre il Modello Nel DOM si riferisce alla struttura (o all'albero) del documento.

Inoltre, il DOM agisce come un'interfaccia dell'applicazione (API) per il linguaggio di scripting per modificare gli elementi del documento HTML

La struttura del documento è in qualche modo come un albero. Contiene il nodo genitore e i nodi figlio.

Lavorare con gli spettatori di Live Dom

Alcuni siti Web ci forniscono generatori DOM live, uno di tali spettatori di DOM è fornito su CODEPEN.io. Considera, i seguenti elementi all'interno della pagina web HTML:

Google	Bing
John Doe, Ruski	California

Per generare la gerarchia DOM utilizzando il codice JavaScript sulla penna del codice, copia e incolla questi elementi HTML all'interno di DOM Viewen su CodePen.io

Sotto questa scheda HTML "Codepen", Sarai in grado di vedere la gerarchia Dom come:

Puoi vedere chiaramente i nodi dei genitori, i nodi figlio e i nodi dei fratelli in base al loro rientro nella struttura

Accesso agli elementi HTML con JavaScript

JavaScript fornisce più metodi per collegare gli elementi su una pagina Web HTML interagendo con il DOM. Questi metodi sono in particolare:

• getElementById ()
• getElementByClassName ()
• getElementByName ()
• getElementByTagName ()
• getElementByTagns ()

Per dimostrarlo, crea una pagina HTML con le seguenti righe:

Sono un tag p nel Dom

Aggiungi il collegamento al file di script usando la riga seguente:

All'interno del file di script, aggiungi le seguenti righe di codice per modificare il colore di sfondo di questo tag p:

var ptag = documento.getElementById ("demo");
ptag.stile.backgroundColor = "Yellow";

Otterrai il seguente risultato sul browser:

Ecco, hai cambiato lo stile di un elemento usando il linguaggio di scripting.

Conclusione

Il DOM è impostato come standard da W3C (World Wide Web Consortium) come interfaccia per il linguaggio di scripting per interagire con gli elementi del documento (HTML o XML). Il linguaggio di scripting (ad esempio JavaScript) non può accedere direttamente agli elementi della pagina web. Pertanto, interagisce con il DOM e il DOM agisce come un'API ed esegue cambiamenti negli elementi della pagina web HTML. La struttura DOM è come un albero, con nodi genili, nodi figlio e nodi tra fratelli.