HTML DOM (Document Object Model) är en hierarkisk representation av HTML-dokument. Den definierar strukturen och egenskaperna för element på en webbsida, vilket gör det möjligt för JavaScript att dynamiskt komma åt, manipulera och uppdatera innehåll, vilket förbättrar interaktivitet och funktionalitet.

Notera : Det kallas en logisk struktur eftersom DOM inte anger någon relation mellan objekt.

gratis ipconfig

Innehållsförteckning

• Varför krävs DOM?
• Struktur för DOM
• Egenskaper för DOM
• Metoder för dokumentobjektmodell
• Vad är DOM inte?
• Nivåer av DOM:

Vad är DOM?

DOM , eller Dokumentobjektmodell , är ett programmeringsgränssnitt som representerar strukturerade dokument som HTML och XML som ett träd av föremål. Den definierar hur man kommer åt, manipulerar och modifierar dokumentelement med hjälp av skriptspråk som JavaScript.

Så i grund och botten är Document Object Model en API som representerar och interagerar med HTML- eller XML-dokument.

DOM är en W3C (World Wide Web Consortium) standard och den definierar en standard för åtkomst till dokument.

W3C Dom-standarden är uppdelad i tre olika delar:

• Kärna DOM – standardmodell för alla dokumenttyper
• XML DOM – standardmodell för XML-dokument
• HTML DOM – standardmodell för HTML-dokument

HTML DOM

HTML DOM är en standard objektmodell och programmeringsgränssnitt för HTML-dokument. HTML DOM är ett sätt att representera webbsidan i en strukturerat hierarkiskt sätt så att det blir lättare för programmerare och användare att glida igenom dokumentet.

Med HTML DOM kan vi enkelt komma åt och manipulera taggar, ID:n, klasser, attribut eller element i HTML med hjälp av kommandon eller metoder som tillhandahålls av dokumentobjektet.

Med DOM JavaScript får vi tillgång till HTML såväl som CSS på webbsidan och kan även ändra beteendet hos HTML-elementen.

Varför krävs DOM?

HTML är van vid strukturera webbsidorna och Javascript används för att lägga till beteende till våra webbsidor. När en HTML-fil läses in i webbläsaren kan JavaScript inte förstå HTML-dokumentet direkt. Så den tolkar och interagerar med Document Object Model (DOM), som skapas av webbläsaren baserat på HTML-dokumentet.

DOM är i grunden representationen av samma HTML-dokument men i en trädliknande struktur som består av objekt. JavaScript kan inte förstå taggarna() i HTML-dokument men kan förstå objekt h1 i DOM.

JavaScript tolkar DOM enkelt och använder det som en brygga för att komma åt och manipulera elementen. DOM Javascript tillåter åtkomst till vart och ett av objekten (h1, p, etc) genom att använda olika funktioner.

hej världen java

Document Object Model (DOM) är avgörande i webbutveckling av flera skäl:

• Dynamiska webbsidor: Det låter dig skapa dynamiska webbsidor. Det gör det möjligt för JavaScript att komma åt och manipulera sidinnehåll, struktur och stil dynamiskt vilket ger interaktiva och responsiva webbupplevelser, som att uppdatera innehåll utan att ladda om hela sidan eller svara på användaråtgärder direkt.
• Interaktivitet: Med DOM kan du svara på användaråtgärder (som klick, inmatningar eller rullningar) och ändra webbsidan därefter.
• Innehållsuppdateringar: När du vill uppdatera innehållet utan att uppdatera hela sidan, möjliggör DOM riktade ändringar som gör webbapplikationerna mer effektiva och användarvänliga.
• Cross-Browser-kompatibilitet: Olika webbläsare kan rendera HTML och CSS på olika sätt. DOM tillhandahåller ett standardiserat sätt att interagera med sidelement.
• Single-Page Applications (SPA): Applikationer byggda med ramverk som React eller Angular, är starkt beroende av DOM för effektiv rendering och uppdatering av innehåll inom en enda HTML-sida utan att ladda om hela sidan.

Struktur för DOM

DOM kan ses som ett träd eller en skog (mer än ett träd). Termen strukturmodell används ibland för att beskriva den trädliknande representationen av ett dokument.

Varje gren av trädet slutar i en nod, och varje nod innehåller objekt Händelseavlyssnare kan läggas till noder och triggas vid en förekomst av en given händelse. En viktig egenskap hos DOM-strukturmodeller är strukturell isomorfism : om två DOM-implementationer används för att skapa en representation av samma dokument, kommer de att skapa samma strukturmodell, med exakt samma objekt och relationer.

Varför kallas DOM för en objektmodell?

Dokument modelleras med hjälp av objekt, och modellen inkluderar inte bara strukturen hos ett dokument utan också beteendet hos ett dokument och de objekt som det är sammansatt av som taggelement med attribut i HTML.

xampp alternativ

Egenskaper för DOM

Låt oss se egenskaperna för dokumentobjektet som kan nås och ändras av dokumentobjektet.

Representation av DOM

• Fönsterobjekt : Window Object är objektet i webbläsaren som alltid är överst i hierarkin. Det är som ett API som används för att ställa in och komma åt webbläsarens alla egenskaper och metoder. Den skapas automatiskt av webbläsaren.
• Dokumentobjekt: När ett HTML-dokument läses in i ett fönster blir det ett dokumentobjekt. Dokumentobjektet har olika egenskaper som hänvisar till andra objekt som tillåter åtkomst till och modifiering av innehållet på webbsidan. Om det finns ett behov av att komma åt något element på en HTML-sida börjar vi alltid med att komma åt 'dokument'-objektet. Dokumentobjekt är egenskap hos fönsterobjekt.
• Formulärobjekt: Den representeras av form taggar.
• Länkobjekt : Den representeras av länk taggar.
• Ankare Objekt : Den representeras av a href taggar.
• Formulärkontrollelement: Formulär kan ha många kontrollelement som textfält, knappar, alternativknappar, kryssrutor, etc.

Metoder för dokumentobjekt

DOM tillhandahåller olika metoder som tillåter användare att interagera med och manipulera dokumentet. Några vanliga DOM-metoder är:

Exempel: I det här exemplet använder vi HTML-element-id för att hitta DOM HTML-elementet.

    
techcodeview.comh2>
En datavetenskapsportal för nördar. p>
Detta exempel illustrerar getElementByIdb>-metoden. p>
p>