DOM HTML (modello oggetto documento) è una rappresentazione gerarchica dei documenti HTML. Definisce la struttura e le proprietà degli elementi su una pagina Web, consentendo a JavaScript di accedere, manipolare e aggiornare dinamicamente il contenuto, migliorando l'interattività e la funzionalità.
Nota : Si chiama struttura logica perché DOM non specifica alcuna relazione tra gli oggetti.
Tabella dei contenuti
- Perché è richiesto il DOM?
- Struttura del DOM
- Proprietà del DOM
- Metodi del Document Object Model
- Cosa non è il DOM?
- Livelli di DOM:
Cos'è il DOM?
DOM , O Modello oggetto documento , è un'interfaccia di programmazione che rappresenta documenti strutturati come HTML E XML come un albero di oggetti. Definisce come accedere, manipolare e modificare gli elementi del documento utilizzando linguaggi di scripting come JavaScript.
Quindi fondamentalmente il Document Object Model è un file API che rappresenta e interagisce con documenti HTML o XML.
comando di esecuzione di Linux
Il DOM è un W3C (World Wide Web Consortium) standard e definisce uno standard per l'accesso ai documenti.
Lo standard W3C Dom è diviso in tre diverse parti:
- DOM principale – modello standard per tutti i tipi di documenti
- DOM XML – modello standard per documenti XML
- DOMHTML – modello standard per documenti HTML
DOMHTML
HTML DOM è uno standard modello di oggetto e interfaccia di programmazione per Documenti HTML. DOMHTML è un modo per rappresentare la pagina web in a modo gerarchico strutturato in modo che diventi più facile per programmatori e utenti scorrere il documento.
Con HTML DOM possiamo accedere e manipolare facilmente tag, ID, classi, attributi o elementi HTML utilizzando comandi o metodi forniti dall'oggetto documento.
Utilizzando DOM JavaScript abbiamo accesso all'HTML e al CSS della pagina web e possiamo anche modificare il comportamento degli elementi HTML.
Perché è richiesto il DOM?
L'HTML è abituato struttura le pagine web e Javascript si usa per aggiungere comportamento alle nostre pagine web. Quando un file HTML viene caricato nel browser, JavaScript non è in grado di comprendere direttamente il documento HTML. Quindi interpreta e interagisce con il Document Object Model (DOM), che viene creato dal browser in base al documento HTML.
DOM è fondamentalmente la rappresentazione dello stesso documento HTML ma in una struttura ad albero composta da oggetti. JavaScript non è in grado di comprendere tag() nel documento HTML ma può comprendere l'oggetto h1 nel DOM.
JavaScript interpreta facilmente il DOM, utilizzandolo come un ponte per accedere e manipolare gli elementi. DOM Javascript consente l'accesso a ciascuno degli oggetti (h1, p, ecc.) utilizzando diverse funzioni.
albero di ricerca binario]
Il Document Object Model (DOM) è essenziale nello sviluppo web per diversi motivi:
- Pagine Web dinamiche: Ti consente di creare pagine web dinamiche. Consente a JavaScript di accedere e manipolare il contenuto, la struttura e lo stile della pagina in modo dinamico, offrendo esperienze web interattive e reattive, come l'aggiornamento del contenuto senza ricaricare l'intera pagina o la risposta istantanea alle azioni dell'utente.
- Interattività: Con il DOM puoi rispondere alle azioni dell'utente (come clic, input o scorrimento) e modificare di conseguenza la pagina web.
- Aggiornamenti dei contenuti: Quando si desidera aggiornare il contenuto senza aggiornare l'intera pagina, il DOM consente modifiche mirate rendendo le applicazioni web più efficienti e facili da usare.
- Compatibilità tra browser: Browser diversi possono visualizzare HTML e CSS in modi diversi. Il DOM fornisce un modo standardizzato per interagire con gli elementi della pagina.
- Applicazioni a pagina singola (SPA): Le applicazioni realizzate con framework come React o Angular fanno molto affidamento sul DOM per un rendering e un aggiornamento efficienti del contenuto all'interno di una singola pagina HTML senza ricaricare l'intera pagina.
Struttura del DOM
Il DOM può essere pensato come un albero o una foresta (più di un albero). Il termine modello di struttura è talvolta usato per descrivere la rappresentazione ad albero di un documento.
Ogni ramo dell'albero termina con un nodo e ogni nodo contiene oggetti. I listener di eventi possono essere aggiunti ai nodi e attivati al verificarsi di un determinato evento. Una proprietà importante dei modelli di struttura DOM è isomorfismo strutturale : se due implementazioni DOM vengono utilizzate per creare una rappresentazione dello stesso documento, creeranno lo stesso modello di struttura, con esattamente gli stessi oggetti e relazioni.
Perché il DOM è chiamato modello a oggetti?
I documenti sono modellati utilizzando oggetti e il modello include non solo la struttura di un documento ma anche il comportamento di un documento e gli oggetti di cui è composto come elementi tag con attributi in HTML.
Proprietà del DOM
Vediamo le proprietà dell'oggetto documento a cui è possibile accedere e modificare dall'oggetto documento.
Rappresentazione del DOM
- Oggetto Finestra : L'oggetto Finestra è l'oggetto del browser che è sempre in cima alla gerarchia. È come un'API utilizzata per impostare e accedere a tutte le proprietà e i metodi del browser. Viene creato automaticamente dal browser.
- Oggetto documento: Quando un documento HTML viene caricato in una finestra, diventa un oggetto documento. L'oggetto 'documento' ha diverse proprietà che fanno riferimento ad altri oggetti che consentono l'accesso e la modifica del contenuto della pagina web. Se è necessario accedere a qualsiasi elemento in una pagina HTML, iniziamo sempre con l'accesso all'oggetto 'documento'. L'oggetto documento è proprietà dell'oggetto finestra.
- Oggetto modulo: È rappresentato da modulo tag.
- Collega oggetto : È rappresentato da collegamento tag.
- Oggetto di ancoraggio : È rappresentato da un href tag.
- Elementi di controllo del modulo: Il modulo può avere molti elementi di controllo come campi di testo, pulsanti, pulsanti di opzione, caselle di controllo, ecc.
Metodi dell'oggetto documento
DOM fornisce vari metodi che consentono agli utenti di interagire e manipolare il documento. Alcuni metodi DOM comunemente usati sono:
| Metodo | Descrizione |
|---|---|
| scrivere (corda) | Scrive la stringa data sul documento. |
| getElementById() | Restituisce l'elemento avente il valore id specificato. |
| getElementsByName() | Restituisce tutti gli elementi aventi il valore del nome specificato. |
| getElementsByTagName() | Restituisce tutti gli elementi aventi il nome del tag specificato. |
| getElementsByClassName() | Restituisce tutti gli elementi aventi il nome della classe data. |
Esempio: In questo esempio, utilizziamo l'ID dell'elemento HTML per trovare l'elemento HTML DOM.
HTML techcodeview.comh2>
Un portale di informatica per geek. p>
Questo esempio illustra il metodo getElementByIdb>. p>
p>