Hvad er dokumentobjektmodellen, og hvorfor du skal vide, hvordan du bruger den.

Så du har studeret HTML, du har oprettet dine første tags, lært om CSS, lavet smukke formularer, fantastiske knapper, lydhøre sider og er begyndt at vise alle, hvor fantastisk alt det var.

Men så beslutter du, at du vil tage endnu et skridt i din læring, og du er begyndt at undre dig selv: “Hvordan kan jeg tilføje animation til min side? Jeg ville ønske, at denne knap gjorde nogle animationer på min side, da jeg klikkede på den! ”

Nå, det er her DOM kommer til at løse dit problem. Du har sikkert hørt meget om det, men du ved muligvis endnu ikke, hvad der er, og hvilke problemer det løser. Så lad os grave ind.

Så hvad er DOM?

Kender du alle de seje animationer, som du ser rundt omkring, som får dig til at tænke over dig selv: “Wow, jeg ville ønske, jeg kunne lave noget lignende”? Alle disse animationer er lavet ved at manipulere DOM. Jeg vil nu forklare dig, hvordan du begynder at manipulere det og få dine websteder til at se coolere ud.

DOM (Document Object Model) er en grænseflade, der repræsenterer, hvordan dine HTML- og XML-dokumenter læses af browseren. Det giver et sprog (JavaScript) mulighed for at manipulere, strukturere og style dit websted. Når browseren har læst dit HTML-dokument, opretter det et repræsentationstræ kaldet Document Object Model og definerer, hvordan dette træ kan fås.

Fordele

Ved at manipulere DOM har du uendelige muligheder. Du kan oprette applikationer, der opdaterer dataene på siden uden behov for opdatering. Du kan også oprette applikationer, der kan tilpasses af brugeren og derefter ændre sidens layout uden opdatering. Du kan trække, flytte og slette elementer.

Som jeg sagde, har du uendelige muligheder - du skal bare bruge din kreativitet.

Repræsentation af browseren

På billedet ovenfor kan vi se repræsentationstræet, og hvordan det oprettes af browseren. I dette eksempel har vi fire vigtige elementer, som du vil se meget:

  1. Dokument : Det behandler alle HTML- dokumenter.
  2. Elementer : Alle tags, der er inde i din HTML eller XML, bliver til et DOM-element.
  3. Tekst : Alle tags indhold.
  4. Attributter : Alle attributter fra et bestemt HTML- element. På billedet er attributklassen = ”hero” en attribut fra < p> -elementet.

Manipulering af DOM

Nu kommer vi til det bedste: at begynde at manipulere DOM. Først skal vi oprette et HTML-element som et eksempel for at se nogle metoder og hvordan begivenheder fungerer.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Meget simpelt, ikke? Nu skal vi lære mere om DOM-metoder: hvordan man får vores elementer og begynder at manipulere.

Metoder

DOM har mange metoder. De er forbindelsen mellem vores noder (elementer) og begivenheder, noget som vi vil lære mere om senere. Jeg viser dig nogle af de vigtigste metoder, og hvordan de bruges. Der er mange flere metoder, som jeg ikke vil vise dig her, men du kan se alle metoderne her.

getElementById ()

Denne metode returnerer det element, der indeholder det passede navn- id . Som vi ved, skal id'er være unikke, så det er en meget nyttig metode til kun at få det element, du ønsker.

var myStart = document.getElementsById('start');

myStart : Vores variabelnavn, der ligner vores id, der er bestået.

start : id bestået. Og hvis vi ikke har noget id med det specifikke navn, returnerer det null .

getElementsByClassName ()

Denne metode returnerer en HTMLCollection af alle de elementer, der indeholder den specifikke navneklasse, der er bestået.

var myContainer = document.getElementsByClassName('container');

myContainer : Vores variabelnavn, der ligner vores klasse bestået.

.container : vores klasse bestået. Hvis vi ikke har nogen klasse med det specifikke navn, returnerer den null .

getElementsByTagName ()

Dette fungerer på samme måde som disse metoder ovenfor: det returnerer også en HTMLCollection, men denne gang med en enkelt forskel: den returnerer alle disse elementer med mærketavnet sendt.

var buttons = document.getElementsByTagName('button');

knapper : Vores variablenavn, der ligner vores beståede tagnavn .

knap : tagnavn, som vi ønsker at få.

querySelector ()

Det returnerer det første element, der har bestået den specifikke CSS-vælger . Husk bare, at vælgeren skal følge CSS-syntaksen . Hvis du ikke har nogen vælger , returnerer den nul .

var resetButton = document.querySelector('#reset');

resetButton : Vores variabelnavn, der ligner vores vælger bestået.

#reset : vælger bestået, og hvis du ikke har nogen vælger, der matcher, returnerer den nul .

querySelectorAll ()

Meget ligner querySelector () -metoden, men med en enkelt forskel: den returnerer alle de elementer, der matcher den beståede CSS-vælger . Den vælgeren skal også følge CSS syntaks . Hvis du ikke har nogen vælger , returnerer den nul .

var myButtons = document.querySelector('#buttons');

myButtons : Vores variabelnavn, der ligner vores beståede vælgere .

#knapper : vælgeren er bestået, hvis du ikke har nogen vælger, der matcher den, returnerer den nul .

Disse er nogle af de mest anvendte DOM-metoder. Der er flere flere metoder, du kan bruge, som createElement (), der opretter et nyt element på din HTML-side og setAttribute (), der giver dig mulighed for at indstille nye attributter til HTML-elementerne. Du kan udforske dem alene.

Igen kan du finde alle metoderne her på venstre side i Metoder . Jeg anbefaler virkelig, at du kigger på nogle af de andre, fordi du muligvis har brug for en af ​​dem engang snart.

Nu skal vi lære om begivenheder - trods alt uden dem kan vi ikke lave animationer på vores sider.

Begivenheder

DOM-elementerne har metoder , som vi netop diskuterede, men de har også begivenheder . Disse begivenheder er ansvarlige for at muliggøre interaktivitet på vores side. Men her er en ting, som du måske ikke ved: begivenheder er også metoder .

klik

En af de mest anvendte begivenheder er klikhændelsen. Når brugeren klikker på et bestemt element, vil den indse en vis handling.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Parametrene addEventListener () er:

  1. Den type begivenhed, du ønsker (i dette tilfælde ' klik ').
  2. En tilbagekaldsfunktion
  3. Den useCapture som standard er falsk. Det angiver, om du vil “fange” begivenheden eller ej.

Vælg

Denne begivenhed er til når du vil sende noget, når et bestemt element er valgt. I så fald vi skal sende en simpel alarm .

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

Dette er nogle af de mest anvendte begivenheder. Selvfølgelig har vi mange andre begivenheder, som du kan bruge, som træk og slip begivenheder - når en bruger begynder at trække et element, kan du foretage en handling, og når de slipper det element, kan du foretage en anden handling.

Nu skal vi se, hvordan vi kan krydse DOM og bruge nogle egenskaber.

Kører gennem DOM

Du kan krydse DOM og bruge nogle egenskaber, som vi ser nu. Med disse egenskaber kan du returnere elementer, kommentarer, tekst osv.

.childNodes

Denne egenskab returnerer en nodeList af underordnede noder for det givne element. Det returnerer tekst, kommentarer osv. Så når du vil bruge det, skal du være forsigtig.

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.firstChild

Denne egenskab returnerer det første barn af det givne element.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nodenavn

Denne egenskab returnerer navnet på det givne element. I dette tilfælde passerede vi en div , så den returnerer " div ".

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

Denne egenskab er specifik for tekster og kommentarer , da den returnerer eller indstiller værdien for den aktuelle node . I dette tilfælde vil vi returnere nul , da vi passerede en div .

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

Denne egenskab returnerer typen af det givne element. I dette tilfælde returnerer den " 1 ".

var container = document.querySelector('.container')
var getValue = container.nodeType;

Men hvad betyder " 1 " alligevel? Det er dybest set nodeType for det givne element. I dette tilfælde er det en _ELEMENT_NODE_ og returnerer null. Hvis dette var en attribut, ville den blive returneret som “ 2 ” til os og attributværdien.

Du kan læse mere om nodeTypes her.

Elementer

Disse egenskaber returnerer kun os til elementer i stedet for ovenstående . De bruges oftere og anbefales, fordi de kan forårsage mindre forvirring og er lettere at forstå.

.parentNode

Denne egenskab returnerer overordnet til den angivne node.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

Returnerer det første underordnede element i det givne element.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Returnerer det sidste underordnede element i det givne element.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

Dette er nogle af de mange egenskaber, som DOM har. Det er meget vigtigt for dig at kende det grundlæggende om DOM, hvordan det fungerer, og dets metoder og egenskaber, for en dag har du muligvis brug for det.

Konklusion

DOM giver os flere vigtige API'er til oprettelse af fantastiske og innovative applikationer. Hvis du forstår det grundlæggende i det, kan du skabe utrolige ting. Hvis du vil læse mere om DOM, kan du klikke her og læse alle MDN-dokumenter.

? Giv mig tilladelse på Twitter!

F Benyt samme mig på GitHub!

Jeg leder efter en fjern mulighed, så hvis har nogen, vil jeg meget gerne høre om det, så kontakt mig venligst!