Un oggetto Document rappresenta il file documento visualizzato in quella finestra. L'oggetto Document ha varie proprietà che fanno riferimento ad altri oggetti che consentono l'accesso e la modifica del contenuto del documento. In questo articolo capiremo HTML DOM.
- Concetto HTML DOM
- Cos'è il DOM HTML
- Cosa NON è il DOM HTML
- Da dove proviene il DOM
- Proprietà di HTML DOM
- Trovare elementi HTML
Concetto HTML DOM
Il modo in cui si accede e si modifica un contenuto documentato è chiamato Document Object Model o DOM. Gli Oggetti sono organizzati in una gerarchia. Questa struttura gerarchica si applica all'organizzazione degli oggetti in un documento Web.
- Oggetto finestra e meno Inizio della gerarchia. È l'elemento più importante della gerarchia degli oggetti.
- Oggetto documento e meno Ogni documento HTML che viene caricato in una finestra diventa un oggetto documento. Il documento contiene il contenuto della pagina.
- Oggetto modulo e meno Tutto ciò che è racchiuso nei tag… imposta l'oggetto modulo.
- Elementi di controllo del modulo e meno L'oggetto del modulo contiene tutti gli elementi definiti per quell'oggetto come campi di testo, pulsanti, pulsanti di opzione e caselle di controllo.
Cos'è il DOM HTML
Il Document Object Model è un'API di programmazione per i documenti. Il modello a oggetti stesso è molto simile alla struttura dei documenti che modella. Ad esempio, considera questa tabella, presa da un documento HTML:
| Shady Grove | Eolie |
| Oltre il fiume, Charlie | Dorian |
Cosa NON è il DOM HTML
Questa sezione è progettata per fornire una comprensione più precisa del Document Object Model distinguendolo da altri sistemi che potrebbero sembrare simili.
Sebbene il Document Object Model sia stato fortemente influenzato dall'HTML dinamico, nel Livello 1, non implementa tutto l'HTML dinamico. In particolare, gli eventi non sono ancora stati definiti. Il livello 1 è progettato per gettare una solida base per questo tipo di funzionalità fornendo un modello robusto e flessibile del documento stesso.
Il Document Object Model non è una specifica binaria. I programmi Document Object Model scritti nello stesso linguaggio saranno compatibili con il codice sorgente su tutte le piattaforme, ma il Document Object Model non definisce alcuna forma di interoperabilità binaria.
Il Document Object Model non è un modo per rendere persistenti gli oggetti in XML o HTML. Invece di specificare come gli oggetti possono essere rappresentati in XML, il Document Object Model specifica come i documenti XML e HTML sono rappresentati come oggetti, in modo che possano essere usati nei programmi orientati agli oggetti.
talend open studio for data integration tutorial
Il Document Object Model non è un insieme di strutture dati, è un modello a oggetti che specifica le interfacce. Sebbene questo documento contenga diagrammi che mostrano le relazioni genitore / figlio, queste sono relazioni logiche definite dalle interfacce di programmazione, non rappresentazioni di particolari strutture di dati interne.
Il Document Object Model non definisce 'la vera semantica interna' di XML o HTML. La semantica di quelle lingue è definita dalle lingue stesse.
Il Document Object Model è un modello di programmazione progettato per rispettare queste semantiche. Il Document Object Model non ha ramificazioni per il modo in cui scrivi documenti XML e HTML, qualsiasi documento che può essere scritto in questi linguaggi può essere rappresentato nel Document Object Model.
Il Document Object Model, nonostante il suo nome, non è un concorrente del Component Object Model (COM). COM, come CORBA, è un modo indipendente dal linguaggio per specificare interfacce e oggetti, il Document Object Model è un insieme di interfacce e oggetti progettati per la gestione di documenti HTML e XML. Il DOM può essereimplementato utilizzando sistemi indipendenti dal linguaggio come COM o CORBA, può anche essere implementato utilizzando collegamenti specifici del linguaggio come i collegamenti Java o ECMAScript specificati in questo documento.
Da dove proviene il Document Object Model
Il Document Object Model è nato come specifica per consentire la portabilità degli script JavaScript e dei programmi Java tra i browser web. L'HTML dinamico è stato l'immediato antenato del Document Object Model e originariamente era pensato principalmente in termini di browser.
prerequisiti per apprendere il machine learning
Tuttavia, quando è stato formato il Document Object Model Working Group, sono stati aggiunti anche fornitori in altri domini, inclusi editor HTML o XML e archivi di documenti. Di conseguenza, molti di questi fornitori avevano lavorato con SGML prima che XML fosse sviluppato, il Document Object Model è stato influenzato da SGML Groves e dallo standard HyTime. Alcuni di questi fornitori avevano anche sviluppato i propri modelli di oggetti per i documenti al fine di fornireAPI di programmazione per editor SGML / XML o archivi di documenti e questi modelli a oggetti hanno influenzato anche il Document Object Model.
Proprietà di HTML DOM
Vediamo le proprietà degli oggetti documento a cui è possibile accedere e modificare dall'oggetto documento.
- Oggetto finestra: Window Object è sempre in cima alla gerarchia.
- Oggetto documento: Quando un documento HTML viene caricato in una finestra, diventa un oggetto documento.
- Oggetto modulo: È rappresentato da modulo tag.
- Oggetti di collegamento: È rappresentato da collegamento tag.
- Oggetti di ancoraggio: È rappresentato da a href tag.
- Elementi di controllo del modulo: Il modulo può avere molti elementi di controllo come campi di testo, pulsanti, pulsanti di opzione e caselle di controllo, ecc.
Metodi dell'oggetto documento :
- scrivi ('stringa'): scrive la stringa data sul documento.
- getElementById (): restituisce l'elemento con il valore id dato.
- getElementsByName (): restituisce tutti gli elementi che hanno il valore del nome specificato.
- getElementsByTagName (): restituisce tutti gli elementi che hanno il nome del tag dato.
- getElementsByClassName (): restituisce tutti gli elementi che hanno il nome di classe specificato.
Trovare elementi HTML
Quando vuoi accedere agli elementi HTML con JavaScript, devi prima trovare gli elementi.
Ci sono un paio di modi per farlo:
- Trovare elementi HTML per id
- Trovare elementi HTML in base al nome del tag
- Trovare elementi HTML in base al nome della classe
Ricerca dell'elemento HTML per ID
come configurare eclipse per java
Il modo più semplice per trovare un elemento HTML nel DOM è utilizzare l'id dell'elemento.
Esempio
Ricerca di elementi HTML in base al nome del tag
Questo esempio trova l'elemento con id = 'main', quindi trova tutto
elementi all'interno di 'main':
Con questo, arriviamo alla fine di questo articolo HTML DOM. Spero che abbiate capito i vari aspetti del DOM HTML, il Document Object Model.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Per favore, menzionalo nella sezione commenti del blog 'Immagini HTML' e ti risponderemo.