La rappresentazione di un documento HTML all’interno di un browser Web è trattata come un albero DOM HTML. È una serie di oggetti e definisce la struttura di una pagina web.

Cos'è DOM in JavaScript??

Panoramica ## Benvenuti in un altro entusiasmante post sul blog nella serie di programmazione JavaScript. In questo articolo, toccheremo un concetto molto semplice ma essenziale di sviluppo web. Sì, copriremo il modello di oggetti documenti in JavaScript. In passato, abbiamo pubblicato tutorial JavaScript che sono obbligatori per iniziare lo sviluppo usando il linguaggio JavaScript. Pertanto, ti suggeriamo di leggere a fondo questo post sul blog in modo da non perdere nulla legato a questo concetto importante. Iniziamo questa guida e scopriamo cosa è DOM in JavaScript , DOM Properties e come è possibile interagire con essa a livello di programmazione. Tratteremo i seguenti argomenti in questa guida JavaScript:

Che cos’è il modello Object Model (DOM)?

Dom sta per? Document Object Model (DOM) è la rappresentazione di una pagina Web all’interno di un browser Web. Semplicemente, la rappresentazione gerarchica degli elementi di un documento HTML in un browser è nota come modello di oggetti documenti. È formato a forma di albero che è effettivamente generato dal browser Web. È costituito da vari nodi che sono collegati tra loro formando una forma di albero. Inoltre, gli elementi DOM hanno attributi ed eventi ad essi collegati. In effetti, DOM è un’interfaccia di programmazione che formula la struttura logica di una pagina Web e detta il modo per accedere agli elementi di pagina. Fondamentalmente, JavaScript non riconosce tag HTML come titolo, H1 e ecc. Pertanto, una volta che un documento HTML viene caricato in un browser Web, DOM viene creato che quindi consente a JavaScript di comprendere gli elementi del documento.

Livelli DOM

Questa sezione dimostrerà i vari livelli di DOM. Innanzitutto, c’è un oggetto di finestra in un browser che è sempre in cima, e poi c’è un nodo di documento. Diamo un’occhiata all’immagine qui sotto:

Livelli DOM

Bene, puoi vedere gli elementi DOM nell’immagine sopra. La finestra e il documento sono gli oggetti del browser di livello superiore e quindi abbiamo l’elemento HTML come radice. Andando avanti, abbiamo i nodi della testa e del corpo, il nodo del titolo appartiene al nodo della testa e il nodo del corpo contiene tutti i nodi resi e visibili nel browser Web. Inoltre, gli elementi del corpo contengono attributi che possiamo vedere nell’immagine come il tag di ancoraggio contenente l’attributo “href”. Allo stesso modo, altri nodi DOM contengono vari attributi come IMG, Meta e altro.

Cosa sono le proprietà DOM e come accedervi?

Finora, abbiamo escogitato una risposta a ciò che è DOM in JavaScript e DOM, e abbiamo anche attraversato i nodi DOM. In questa sezione, passeremo attraverso le proprietà DOM e vedremo come possiamo interagire con loro. Ogni elemento DOM ha un valore collegato ad esso come il tag “P” ha proprietà di testo, il tag IMG ha l’immagine e così via. I metodi JavaScript vengono utilizzati per accedere ai valori dei nodi. Inoltre, è possibile aggiungere/rimuovere gli ascoltatori di eventi agli elementi DOM. Puoi trovare le seguenti Dom Properties : INNERHTML : questa proprietà viene utilizzata per impostare o recuperare il contenuto HTML di un nodo DOM.

let htmlContent = document.getElementById("customID").innerHTML;

InnerText : utilizzare questa proprietà DOM per accedere o impostare il contenuto testuale di un elemento HTML.

let textualContent = document.getElementById("customID").innerText;

parentelement : è possibile utilizzare questa proprietà per accedere al nodo genitore dell’elemento.

let parentNode = document.getElementById("customID").parentElement.nodeName;

Stile : aggiorna l’attributo di stile di un elemento.

let styleAttr = document.getElementById("customID").style.color = "red";

Titolo : usa questa proprietà per aggiornare l’elemento del titolo di DOM.

document.getElementById("customID").title= "this is a web page";

Di seguito sono riportati alcuni dei metodi che possiamo usare per interagire con JavaScript DOM: ADDEventListener () : questo metodo DOM viene utilizzato per allegare un gestore di eventi a un elemento.

document.getElementById("customID").addEventListener("click", customFunction);

getAttribute () : questo metodo DOM viene utilizzato per allegare un gestore di eventi a un elemento.

document.getElementById("customID").addEventListener("click", customFunction);

getElementById () : metodo per ottenere un elemento specifico con il dato “ID”.

let element = document.getElementById("myID");

QuerySelector () : usa questo metodo per ottenere il primo elemento figlio che viene abbinato a un selettore CSS.

document.getElementById("myID").querySelector(".first").innerHTML = "change the value";

toString () : è possibile utilizzare questo metodo per convertire un elemento in una stringa. Allo stesso modo, ci sono molti altri metodi e proprietà che puoi esplorare.

Conclusione

Stiamo terminando questo tutorial Javasxcript qui con la speranza che tu abbia una buona comprensione di What Is Dom in JavaScript . Abbiamo anche attraversato DOM, livelli DOM, albero DOM HTML e proprietà DOM . Questo post sul blog è molto essenziale per i neofiti che stanno cercando di avere una forte presa sui concetti di Javascrit. Inoltre, ci sono altri articoli pertinenti che puoi trovare nella sezione “vedi anche”.

Connettiti con noi

Infine, containerize.com offre tutorial JavaScript in corso su vari argomenti entusiasmanti. Puoi rimanere nel giro seguendoci sulle nostre piattaforme di social media, tra cui Facebook, LinkedIn e Twitter.

Fai una domanda

Puoi farci sapere delle tue domande o domande sul nostro forum.

FAQ

Cosa viene usato Dom in JavaScript? Puoi visitare questo link per ottenere una risposta dettagliata a questa domanda.

Guarda anche