Html Dom
Questo articolo discuterà HTML DOM, il suo significato e la sua struttura. Parleremo anche delle proprietà e dei metodi del modello di oggetti del documento e dei livelli DOM.
Html Dom
Il modello a oggetti documenti HTML o DOM HTML è un'interfaccia di programmazione XML e HTML. Il modello a oggetto document crea una struttura logica del documento e definisce il metodo per accedervi e modificarli. Poiché HTML DOM non identifica alcuna relazione di oggetto, è definito come struttura logica.
HTML DOM è anche noto per rappresentare le pagine Web in modo gerarchico e organizzato in modo che gli utenti e i programmatori JavaScript possano facilmente navigare attraverso il documento. HTML DOM consente di accedere e manipolare elementi, classi, tag, attributi e IDS HTML utilizzando i metodi e i comandi offerti.
Perché hai bisogno di html Dom
JavaScript viene utilizzato per aggiungere funzionalità correlate se si utilizza HTML per strutturare le pagine Web. Quando un documento HTML viene caricato nel browser, JavaScript non può capirlo direttamente. Pertanto, viene creato un modello di oggetto documento corrispondente. Il DOM generato rappresenta lo stesso documento HTML in modo diverso con l'aiuto degli oggetti. Successivamente, JavaScript può interpretare prontamente il dom HTML.
Ad esempio, in un documento HTML, JavaScript non può comprendere direttamente i tag (
paragrafo
); Tuttavia, può capire l'oggetto "P"Nel modello a oggetto document. Con questa capacità, JavaScript può utilizzare diversi metodi per accedere agli oggetti aggiunti dei documenti HTML.
Struttura di HTML Dom
Il modello di oggetti DOM o documento HTML ha una struttura simile a un albero, in cui l'albero definisce il modello di struttura del documento. Nel modello di struttura DOM HTML, "isomorfismo strutturale"È una proprietà essenziale che afferma che se hai utilizzato due implementazioni DOM per costruire una rappresentazione o un modello dello stesso documento HTML, produrranno gli stessi modelli strutturali basati sugli stessi oggetti e sulle loro relazioni.
Perché chiamiamo HTML Dom un modello di documento
Gli oggetti HTML vengono utilizzati per i documenti di modellazione. Questo modello comprende la struttura del documento, gli oggetti e il loro comportamento, come gli elementi tag HTML con i loro attributi.
Proprietà Dom HTML
Ora, controlliamo le proprietà dell'oggetto del documento che possono recuperare e modificare l'oggetto del documento:
- Oggetto della finestra: Vedrai sempre l'oggetto "finestra" nella parte superiore della gerarchia Dom.
- Oggetto del documento: Quando si carica un documento HTML in un browser, viene convertito in un oggetto documento.
- Oggetto di ancoraggio: I tag HREF sono utilizzati per rappresentare gli oggetti di ancoraggio.
- Oggetto modulo: I tag del modulo sono utilizzati per rappresentare gli oggetti del modulo.
- Oggetto Link: I tag di collegamento sono utilizzati per rappresentare gli oggetti di collegamento.
- Elementi di controllo del modulo: I moduli possono anche avere altri elementi di controllo come pulsanti, reset, pulsanti di opzione, textrea, caselle di controllo.
Metodi oggetto documento HTML
Ecco alcuni utili metodi di oggetti documenti HTML che è possibile utilizzare in base alle tue esigenze:
- getElementByClassName (): Il metodo getElementByClassName () viene utilizzato per il recupero di elementi con il nome della classe specificato.
- getElementByTagName (): Il metodo getElementByTagname () viene utilizzato per il recupero di elementi con il nome del tag aggiunto.
- getElementByName (): Il metodo getElementByName () viene utilizzato per il recupero di elementi con il valore del nome specificato.
- getElementById (): Il metodo getElementById () viene utilizzato per il recupero di elementi con valore ID specificato.
- scrivere(): Il metodo Write () viene utilizzato per scrivere la stringa specificata nel documento.
Esempio 1: Trova e ottieni elemento HTML per ID in JavaScript
Nell'esempio seguente, abbiamo usato il metodo getElementById () per trovare il DOM HTML che ha l'ID "P1":
Questo è Linuxhint.com
Trova e ottieni elementi Dom HTML per ID
Questo è un programma JavaScript che utilizza il metodo "getElementsbyId"
Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:
L'esecuzione del programma JavaScript di cui sopra mostrerà il seguente output:
Esempio 2: rappresentazione di elementi DOM HTML
Il seguente esempio illustra la rappresentazione di elementi HTML in DOM (modello di oggetto document):
| Bicicletta | Aereo |
| Camion | Autobus |
Ecco la rappresentazione degli elementi sopra donati in una struttura simile a un albero:
Livello DOM HTML
HTML DOM è composto da quattro livelli: Livello 0, Livello 1, Livello 2 e Livello 3.
Livello Dom 0
Questo livello offre un set di interfaccia di basso livello.
Dom Livello 1
Il livello DOM 1 comprende Html E NUCLEO parti. HTML fornisce interfacce di alto livello che possono essere utilizzate per rappresentare i documenti HTML e la parte centrale viene utilizzata per rappresentare il documento strutturato.
Dom Livello 2
Il livello DOM 2 si basa su sei specifiche: intervallo, attraversamento, stile, eventi e core2.
- ALLINEARE: Permette ai programmi HTML di allocare dinamicamente un intervallo di contenuti nel documento.
- Attraversamento: Permette ai programmi HTML di attraversare il documento dinamicamente.
- STILE: Permette ai programmi di recuperare e impostare il contenuto dei fogli di stile.
- Eventi: Quando un utente interagisce con una pagina Web, gli eventi sono gli script eseguiti a seguito.
- VISUALIZZAZIONI: Permette ai programmi HTML di recuperare e impostare il contenuto del documento.
Dom Livello 3
Il livello DOM 3 si basa su cinque specifiche: xpath, eventi, convalida, salvataggio, carico e core3.
- XPath: È un linguaggio del percorso utilizzato per accedere alla struttura dell'albero di DOM.
- Eventi: Migliora la funzionalità degli eventi di livello 2 DOM.
- Convalida: Permette al programma HTML di modificare la struttura e il contenuto del documento garantendo al contempo che il documento fornito sia valido.
- SALVA E CARICO: Il programma HTML consente di caricare e salvare dinamicamente il contenuto del documento XML in un documento DOM.
- Core3: Migliora la funzionalità del core di livello 2 DOM.
Conclusione
HTML DOM o il modello di oggetti documenti è fondamentale per lo sviluppo di siti Web interattivi. È un'interfaccia utente che consente a un linguaggio di programmazione di cambiare lo stile, la struttura e il contenuto del sito Web. HTML DOM funge anche da interfaccia tra HTML e JavaScript. Questo articolo ha discusso di HTML Dom, il suo significato e la sua struttura. Abbiamo anche parlato delle proprietà e dei metodi del modello di oggetti di documento e dei livelli di DOM.