HTML5 - DOM parte 1

Il SOLE che si riferisce a Modello oggetto documentoNon è altro che una rappresentazione ad oggetti degli elementi che sono nel nostro documento HTML, grazie a ciò possiamo stabilire una connessione più profonda con Javascript e ottenere effetti molto interessanti; Tuttavia, per arrivare a quel livello, dobbiamo prima sapere molto bene come gestirci all'interno del DOM per la sua implementazione e utilizzo.
Capire il DOM
Ampliare il concetto di SOLE Possiamo anche aggiungere che si tratta di un insieme di oggetti che rappresenta il HTML Nel documento, all'interno del suo nome vediamo cos'è un modello e la parola chiave che rappresenta è un modello rappresentativo del documento HTML.
Il DOM è uno strumento chiave nello sviluppo WEB, poiché ci fornisce un ponte tra la struttura e il contenuto tra i nostri documenti HTML e Javascript.
Il modello di cui stiamo parlando viene creato dal browser quando interpreta il codice HTML, la struttura di base di un DOM può essere vista nel modo seguente in un diagramma nell'immagine seguente:

Come possiamo vedere, si basa su una struttura gerarchica, con ciò otteniamo che possiamo utilizzare i percorsi di queste relazioni per ottenere informazioni o apportare modifiche strutturali tramite Javascript.
Testare il DOM
Effettueremo alcuni semplici test sul nostro documento in modo da abituarci a come puoi lavorarci. SOLE, uno dei primi test che possiamo eseguire è verificare che una funzionalità sia disponibile all'interno del documento, vediamo nel codice seguente:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte. 

Qui abbiamo appena fatto qualcosa di semplice, prima controlliamo se il metodo esiste querySelectorAll, se esiste allora ad una variabile assegniamo il contenuto di tutti gli elementi img hanno l'identità paratesto, poiché stiamo facendo un controllo in caso di errore, utilizziamo un modo diverso per ottenere gli stessi dati, in questo caso è il getElementById e più tardi getElementByTagNameAlla fine, semplicemente con la nostra variabile definita stiamo iterando attraverso il suo contenuto e cambiando le loro proprietà CSS.
Forse qui il negativo che possiamo notare è che se abbiamo molte verifiche, il nostro codice può diventare complesso e illeggibile, tutto è questione di compromessi tra ciò che vogliamo ottenere e il modo per ottenerlo, in questo modo possiamo ottenere il nostro risultati.
Nella parte successiva di questo tutorial esamineremo alcuni esempi più avanzati su come continuare a lavorare con il DOM.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo