HTML5 - DOM del 1

Indholdsfortegnelse
Det SOL som refererer til DokumentobjektmodelDet er ikke andet end en objektrepræsentation af de elementer, der er i vores HTML -dokument, takket være dette kan vi lave en dybere forbindelse med Javascript, og det opnår meget interessante effekter; For at komme til det niveau skal vi dog først og fremmest vide godt, hvordan vi skal håndtere os selv i DOM for dens implementering og brug.
Forståelse af DOM
Udvidelse af begrebet SOL Vi kan også tilføje, at det er en samling af objekter, der repræsenterer HTML I dokumentet ser vi inden for dets navn, hvad en model er, og nøgleordet, den repræsenterer, er en repræsentativ model for HTML -dokumentet.
DOM er et centralt værktøj i WEB -udvikling, da det giver os en bro mellem strukturen og indholdet mellem vores HTML- og Javascript -dokumenter.
Den model, vi taler om, er oprettet af browseren, når den fortolker HTML -koden, grundstrukturen for en DOM kan ses på følgende måde i et diagram i følgende billede:

Som vi kan se, er det baseret på en hierarkisk struktur, med dette opnår vi, at vi kan bruge stierne i disse relationer til at indhente oplysninger eller foretage strukturelle ændringer via Javascript.
Test af DOM
Vi skal udføre nogle enkle tests på vores dokument, så vi vænner os til, hvordan du kan arbejde med det. SOL, en af ​​de første tests, vi kan udføre, er at kontrollere, at en funktionalitet er tilgængelig i dokumentet, lad os se i følgende kode:
 Eksempel

Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.


Her lavede vi bare noget simpelt, først tjekker vi om metoden findes forespørgselSelektorAlle, hvis den eksisterer, så tildeler vi indholdet af alle elementerne til en variabel img de har id'et paratekst, da vi foretager en check i tilfælde af, at de mislykkes, bruger vi en anden måde til at indhente de samme data, i dette tilfælde er det getElementById og senere getElementByTagNameI sidste ende gentager vi simpelthen med vores definerede variabel gennem dets indhold og ændrer deres CSS -egenskaber.
Måske er det negative, vi kan se her, at hvis vi har mange verifikationer, kan vores kodeks blive kompleks og ulæselig, alt er et spørgsmål om kompromiser mellem det, vi ønsker at opnå, og måden at opnå det på, på denne måde kan vi opnå vores resultater.
I den næste del af denne vejledning ser vi på nogle mere avancerede eksempler på, hvordan man fortsætter arbejdet med DOM.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt

Du vil bidrage til udviklingen af ​​hjemmesiden, at dele siden med dine venner

wave wave wave wave wave