HTML5 - DOM del 1

De SOL som hänvisar till DokumentobjektmodellDet är inget annat än en objektrepresentation av elementen som finns i vårt HTML -dokument, tack vare detta kan vi göra en djupare koppling till Javascript och det uppnår mycket intressanta effekter; Men för att komma till den nivån måste vi först mycket väl veta hur vi ska hantera oss själva inom DOM för dess implementering och användning.
Förstå DOM
Utöka begreppet SOL Vi kan också lägga till att det är en samling objekt som representerar HTML I dokumentet, inom dess namn ser vi vad en modell är och nyckelordet det representerar är en representativ modell av HTML -dokumentet.
DOM är ett viktigt verktyg för webbutveckling, eftersom det ger oss en bro mellan strukturen och innehållet mellan våra HTML- och Javascript -dokument.
Modellen vi pratar om skapas av webbläsaren när den tolkar HTML -koden, grundstrukturen för en DOM kan ses på följande sätt i ett diagram i följande bild:

Som vi kan se är det baserat på en hierarkisk struktur, med detta uppnår vi att vi kan använda banorna i dessa relationer för att få information eller göra strukturella förändringar via Javascript.
Testar DOM
Vi ska genomföra några enkla tester på vårt dokument så att vi vänjer oss vid hur du kan arbeta med det. SOL, ett av de första testerna som vi kan utföra är att verifiera att en funktionalitet är tillgänglig i dokumentet, låt oss se i följande kod:

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val. 

Här gjorde vi bara något enkelt, först kontrollerar vi om metoden finns querySelectorAll, om den existerar så tilldelar vi en variabel innehållet i alla element img de har id paratxteftersom vi gör en kontroll om den misslyckas använder vi ett annat sätt för att få samma data, i det här fallet är det getElementById och senare getElementByTagNameI slutändan, helt enkelt med vår definierade variabel, itererar vi genom dess innehåll och ändrar deras CSS -egenskaper.
Kanske är det negativa som vi kan se att om vi har många verifieringar kan vår kod bli komplex och oläslig, allt handlar om kompromisser mellan vad vi vill uppnå och sättet att uppnå det, på så sätt kan vi få vår resultat.
I nästa del av denna handledning kommer vi att titta på några mer avancerade exempel på hur man kan fortsätta arbeta med DOM.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng