Et dokumentobjekt repræsenterer dokument, der vises i det vindue. Dokumentobjektet har forskellige egenskaber, der henviser til andre objekter, der giver adgang til og ændring af dokumentindhold. I denne artikel vil vi forstå HTML DOM.
- HTML DOM-koncept
- Hvad HTML DOM er
- Hvad HTML DOM IKKE er
- Hvor DOM kom fra
- Egenskaber for HTML DOM
- Finde HTML-elementer
HTML DOM-koncept
Den måde, hvorpå et dokumenteret indhold tilgås og ændres, kaldes Dokumentobjektmodel eller DOM. Objekterne er organiseret i et hierarki. Denne hierarkiske struktur gælder for organisering af objekter i et webdokument.
- Vindueobjekt & minus Top af hierarkiet. Det er det største element i objekthierarkiet.
- Dokumentobjekt og minus Hvert HTML-dokument, der indlæses i et vindue, bliver et dokumentobjekt. Dokumentet indeholder indholdet af siden.
- Formularobjekt & minus Alt indeholdt i ... tags sætter formobjektet.
- Formkontrolelementer & minus Formularobjektet indeholder alle de elementer, der er defineret for det objekt, såsom tekstfelter, knapper, radioknapper og afkrydsningsfelter.
Hvad HTML DOM er
Document Object Model er en programmerings-API til dokumenter. Objektmodellen ligner meget strukturen på de dokumenter, den modellerer. Overvej f.eks. Denne tabel taget fra et HTML-dokument:
| Shady Grove | Æoliske |
| Over floden, Charlie | Dorian |
Hvad HTML DOM IKKE er
Dette afsnit er designet til at give en mere præcis forståelse af dokumentobjektmodellen ved at skelne den fra andre systemer, der kan synes at være som den.
Selvom dokumentobjektmodellen blev stærkt påvirket af dynamisk HTML, implementerer den ikke niveau dynamisk i niveau 1. Især er begivenheder endnu ikke defineret. Niveau 1 er designet til at lægge et solidt fundament for denne form for funktionalitet ved at levere en robust, fleksibel model af selve dokumentet.
Dokumentobjektmodellen er ikke en binær specifikation. Document Object Model-programmer skrevet på samme sprog vil være kildekode kompatible på tværs af platforme, men Document Object Model definerer ikke nogen form for binær interoperabilitet.
Dokumentobjektmodellen er ikke en måde at fastholde objekter til XML eller HTML. I stedet for at specificere, hvordan objekter kan repræsenteres i XML, angiver dokumentobjektmodellen, hvordan XML- og HTML-dokumenter repræsenteres som objekter, så de kan bruges i objektorienterede programmer.
Dokumentobjektmodellen er ikke et sæt datastrukturer, det er en objektmodel, der specificerer grænseflader. Selvom dette dokument indeholder diagrammer, der viser forældre / barn-forhold, er disse logiske forhold defineret af programmeringsgrænsefladerne, ikke repræsentationer af nogen speciel intern datastruktur.
Dokumentobjektmodellen definerer ikke 'den sande indre semantik' i XML eller HTML. Semantikken for disse sprog er defineret af selve sprogene.
Document Object Model er en programmeringsmodel designet til at respektere denne semantik. Dokumentobjektmodellen har ingen konsekvenser for den måde, du skriver XML- og HTML-dokumenter på, hvilket som helst dokument, der kan skrives på disse sprog, kan repræsenteres i dokumentobjektmodellen.
Dokumentobjektmodellen er trods navnet ikke en konkurrent til komponentobjektmodellen (COM). COM er, ligesom CORBA, en sproguafhængig måde at specificere grænseflader og objekter på. Dokumentobjektmodellen er et sæt grænseflader og objekter designet til styring af HTML- og XML-dokumenter. DOM kan væreimplementeret ved hjælp af sproguafhængige systemer som COM eller CORBA, kan det også implementeres ved hjælp af sprogspecifikke bindinger som Java- eller ECMAScript-bindinger specificeret i dette dokument.
Hvor dokumentobjektmodellen kom fra
Dokumentobjektmodellen stammer fra en specifikation, der tillader, at JavaScript-scripts og Java-programmer kan bæres blandt webbrowsere. Dynamisk HTML var den nærmeste forfader til Document Object Model, og det blev oprindeligt tænkt på i vid udstrækning med hensyn til browsere.
virksomheder, der bruger r programmeringssprog
Da arbejdsgruppen for dokumentobjektmodel blev oprettet, blev den imidlertid også tilsluttet af leverandører i andre domæner, herunder HTML- eller XML-redaktører og dokumentopbevaringssteder. Flere af disse leverandører havde arbejdet med SGML, før XML blev udviklet som et resultat, Document Object Model er blevet påvirket af SGML Groves og HyTime-standarden. Nogle af disse leverandører havde også udviklet deres egne objektmodeller til dokumenter for at levereprogrammering af API'er til SGML / XML-redaktører eller dokumentlagre, og disse objektmodeller har også påvirket Document Object Model.
Egenskaber for HTML DOM
Lad os se egenskaberne for dokumentobjekterne, som dokumentobjektet kan få adgang til og ændre.
- Vindue objekt: Vinduesobjekt er altid øverst i hierarkiet.
- Dokument objekt: Når et HTML-dokument indlæses i et vindue, bliver det et dokumentobjekt.
- Formular objekt: Det er repræsenteret af form tags.
- Linkobjekter: Det er repræsenteret af link tags.
- Ankerobjekter: Det er repræsenteret af en href tags.
- Elementkontrolelementer: Formular kan have mange kontrolelementer såsom tekstfelter, knapper, radioknapper og afkrydsningsfelter osv.
Metoder af dokumentobjekt :
- skriv (“streng”): skriver den givne streng på dokumentet.
- getElementById (): returnerer elementet med den givne id-værdi.
- getElementsByName (): returnerer alle de elementer, der har den givne navnværdi.
- getElementsByTagName (): returnerer alle de elementer, der har det givne tagnavn.
- getElementsByClassName (): returnerer alle de elementer, der har det givne klassenavn.
Finde HTML-elementer
Når du vil have adgang til HTML-elementer med JavaScript, skal du først finde elementerne.
Der er et par måder at gøre dette på:
- Finde HTML-elementer efter id
- Finde HTML-elementer efter tagnavn
- Finde HTML-elementer efter klasse navn
Finde HTML-element efter id
Den nemmeste måde at finde et HTML-element i DOM er ved hjælp af element-id'et.
Eksempel
Finde HTML-elementer efter tagnavn
Dette eksempel finder elementet med id = ”main” og finder derefter alt
elementer inde i 'main':
hvad er en hashset java
Med dette slutter vi denne HTML DOM-artikel. Jeg håber, du har forstået de forskellige aspekter af HTML DOM, Document Object Model.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig i færdigheder til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet på bloggen 'HTML-billeder', og vi vender tilbage til dig.