Ett dokumentobjekt representerar dokument som visas i det fönstret. Dokumentobjektet har olika egenskaper som hänvisar till andra objekt som tillåter åtkomst till och ändring av dokumentinnehåll. I den här artikeln kommer vi att förstå HTML DOM.
hur man använder bitvis operatörer i java
- HTML DOM-koncept
- Vad HTML DOM är
- Vad HTML DOM INTE är
- Varifrån DOM kom
- Egenskaper för HTML DOM
- Hitta HTML-element
HTML DOM-koncept
Hur ett dokumenterat innehåll nås och ändras kallas Dokumentobjektmodell eller DOM. Objekten är organiserade i en hierarki. Denna hierarkiska struktur gäller för organisering av objekt i ett webbdokument.
- Fönsterobjekt & minus Överst i hierarkin. Det är det yttersta elementet i objekthierarkin.
- Dokumentobjekt och minus Varje HTML-dokument som laddas in i ett fönster blir ett dokumentobjekt. Dokumentet innehåller sidans innehåll.
- Formobjekt & minus Allt som ingår i ... taggarna ställer in formobjektet.
- Formkontrollelement & minus Formobjektet innehåller alla element som definierats för det objektet, t.ex. textfält, knappar, alternativknappar och kryssrutor.
Vad HTML DOM är
Document Object Model är ett programmerings-API för dokument. Objektmodellen i sig liknar strukturen på de dokument den modellerar. Tänk till exempel på den här tabellen, hämtad från ett HTML-dokument:
| Shady Grove | Eoliska |
| Över floden, Charlie | Dorian |
Vad HTML DOM INTE är
Detta avsnitt är utformat för att ge en mer exakt förståelse för dokumentobjektmodellen genom att skilja den från andra system som kan tyckas vara som den.
Även om dokumentobjektmodellen var starkt påverkad av Dynamic HTML, i nivå 1, implementerar den inte all dynamisk HTML. I synnerhet har händelser ännu inte definierats. Nivå 1 är utformad för att lägga en grund för denna typ av funktionalitet genom att tillhandahålla en robust, flexibel modell av själva dokumentet.
Dokumentobjektmodellen är inte en binär specifikation. Dokumentobjektmodellprogram skrivna på samma språk kommer att vara källkodskompatibla över plattformar, men dokumentobjektmodellen definierar inte någon form av binär interoperabilitet.
Dokumentobjektmodellen är inte ett sätt att bestå objekt till XML eller HTML. I stället för att specificera hur objekt kan representeras i XML, specificerar dokumentobjektmodellen hur XML- och HTML-dokument representeras som objekt, så att de kan användas i objektorienterade program.
Dokumentobjektmodellen är inte en uppsättning datastrukturer, det är en objektmodell som anger gränssnitt. Även om det här dokumentet innehåller diagram som visar förhållanden mellan föräldrar och barn, är det logiska förhållanden som definieras av programmeringsgränssnitten, inte representationer av några speciella interna datastrukturer.
Dokumentobjektmodellen definierar inte 'den verkliga inre semantiken' för XML eller HTML. Semantiken för dessa språk definieras av själva språken.
Document Object Model är en programmeringsmodell utformad för att respektera dessa semantik. Dokumentobjektmodellen har inga konsekvenser för hur du skriver XML- och HTML-dokument, vilket dokument som kan skrivas på dessa språk kan representeras i dokumentobjektmodellen.
Dokumentobjektmodellen, trots sitt namn, är inte en konkurrent till Component Object Model (COM). COM, liksom CORBA, är ett språkoberoende sätt att specificera gränssnitt och objekt Dokumentobjektmodellen är en uppsättning gränssnitt och objekt som är utformade för hantering av HTML- och XML-dokument. DOM kan varaimplementeras med språkoberoende system som COM eller CORBA kan det också implementeras med hjälp av språkspecifika bindningar som Java- eller ECMAScript-bindningar som anges i detta dokument.
Varifrån dokumentobjektmodellen kom
Dokumentobjektmodellen har sitt ursprung som en specifikation för att tillåta JavaScript-skript och Java-program att vara bärbara bland webbläsare. Dynamisk HTML var den närmaste förfadern till Document Object Model, och det var ursprungligen tänkt på i stor utsträckning när det gäller webbläsare.
Men när arbetsgruppen för dokumentobjektmodell bildades anslöts den också av leverantörer i andra domäner, inklusive HTML- eller XML-redigerare och dokumentförvar. Flera av dessa leverantörer hade arbetat med SGML innan XML utvecklades som ett resultat, Document Object Model har påverkats av SGML Groves och HyTime-standarden. Några av dessa leverantörer hade också utvecklat egna objektmodeller för dokument för att tillhandahållaprogrammering av API: er för SGML / XML-redigerare eller dokumentförvar, och dessa objektmodeller har också påverkat Document Object Model.
Egenskaper för HTML DOM
Låt oss se egenskaperna för dokumentobjekten som kan nås och ändras av dokumentobjektet.
- Fönsterobjekt: Fönsterobjekt är alltid högst upp i hierarkin.
- Dokumentobjekt: När ett HTML-dokument laddas in i ett fönster blir det ett dokumentobjekt.
- Formobjekt: Det representeras av form taggar.
- Länkobjekt: Det representeras av länk taggar.
- Förankringsobjekt: Det representeras av en href taggar.
- Elementkontrollelement: Form kan ha många kontrollelement som textfält, knappar, alternativknappar och kryssrutor etc.
Metoder av dokumentobjekt :
- skriv (“sträng”): skriver den angivna strängen på dokumentet.
- getElementById (): returnerar elementet med det angivna id-värdet.
- getElementsByName (): returnerar alla element som har det angivna namnet.
- getElementsByTagName (): returnerar alla element som har det angivna taggenamnet.
- getElementsByClassName (): returnerar alla element som har det angivna klassnamnet.
Hitta HTML-element
När du vill komma åt HTML-element med JavaScript måste du hitta elementen först.
Det finns ett par sätt att göra detta:
- Hitta HTML-element efter id
- Hitta HTML-element efter taggnamn
- Hitta HTML-element efter klassnamn
Hitta HTML-element efter Id
Det enklaste sättet att hitta ett HTML-element i DOM är att använda element-id.
Exempel
Hitta HTML-element efter taggnamn
Detta exempel hittar elementet med id = ”main” och hittar sedan allt
element inuti 'huvud':
Med detta kommer vi till ett slut på denna HTML DOM-artikel. Jag hoppas att du fick förståelse för de olika aspekterna av HTML DOM, Document Object Model.
Kolla in vår som kommer med instruktörsledad live-utbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig i färdigheter för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på bloggen 'HTML-bilder' så återkommer vi till dig.