Del ett: Introduktion av DOM – vad är det och varför ska jag lära känna det?
För dem som är nya inom webbutveckling kan säkert mängden ny terminologi ibland vara nedslående. Men när det kommer till att lära sig JS, är några av de första nya koncepten du definitivt bör linda ditt huvud kring Document Object Model och vad den innebär.
För att hålla det enkelt och inte ta till formella definitioner, representerar DOM webbplatsen och dess element som en logisk struktur, som liknar ett träd med sina grenar. Varje gren är en nod och varje nod innehåller objekt.
När vi har tillgång till en viss nod i DOM, finns det sätt att få tillgång till andra noder i DOM med hjälp av dess relaterade noder. Vi kan flytta upp eller ner i DOM-trädet, eller så kan vi flytta oss i sidled och stanna på samma DOM-nivå. Detta kallas också för att korsa DOM (vilket låter supercoolt om du frågar mig).
Men hur kan vi utnyttja allt detta och hur är det relaterat till programmering i JS?
Eftersom DOM tillåter oss att komma åt alla delar av en webbsida, genom att använda skriptspråk, som till exempel JS, kan vi göra ändringar i dem. På så sätt kan vi ändra dokumentets struktur, stil eller innehåll.
Dessutom tillåter noderna från vårt imaginära träd att koppla händelsehanterare till dem. När en händelse utlöses exekveras händelsehanterarna. Detta öppnar upp en helt ny värld av möjligheter kontrollera webbsidans beteende till oss. De mest uppenbara sätten vi kan använda oss av detta är:
Reagerar på användarinput – ändra sidans innehåll baserat på data som användaren har angett, och till och med skicka dessa data till en annan server.
Använder data som tas emot från API:er och använd dem för att uppdatera sidans innehåll.
Som vi redan har sagt har DOM en trädliknande struktur: börjar med rotelementet, the
märka. Härifrån förgrenar sig varje underordnat element. Vanligtvis är rotelementet en förälder till två underordnade element:and. HTML-taggen är sedan förälder till alla element i den – stycken, artiklar, avsnitt, knappar, formulär, etc. Dessa underordnade element kan sedan ha egna barn: ett formulär kommer att ha etiketter och indata, en artikel kan ha en rubrik, textinnehåll, länkar, etc.
Hur man kommer åt DOM-elementen i JS
Det finns olika sätt tillgängliga för oss, men låt oss börja med att använda “dokument”-objektet och dess metoder.
document.getElementsByTagName(); Som namnet antyder måste vi ange taggnamnet för att kunna använda den här metoden. Så, om vi till exempel vill markera alla styckeelement, skulle vi använda document.getElementsByTagName(‘p’); Naturligtvis skulle det vara användbart att spara denna referens i en variabel, till exempel så här: var paragraphs = “document.getElementsByTagName(‘p’); Det är viktigt att veta att metoden getElementsByTagName() returnerar ett objekt av typen HTMLCollection, eller med andra ord, en samling av alla element i dokumentet med det angivna taggnamnet. HTMLCollection-objektet representerar en samling noder. Noderna kan nås med indexnummer. Indexet börjar på 0. Detta liknar hur vi skulle komma åt en array. Men se upp! En HTML-samling är INTE ett array-objekt, så vi kan inte använda Array-metoder som push(), pop() eller indexOf(). Men för att komma åt det första elementet i vår samling använder vi följande: var firstParagraph = paragrafer[0];
Vi skapar en konstant som heter firstParagraph och sedan tilldelar vi den första (eftersom, som det alltid är fallet med index, vi börjar räkna vid 0) elementet i vår HTML-samling “paragrafer”.
document.getElementById(); Mycket användbart, men försiktigt – som du kan se om du observerar dess namn, returnerar denna metod endast ETT element, inte en samling. Detta är helt logiskt om du tänker på att en välstrukturerad och korrekt designad webb bara bör ha ett element per ID. document.getElementsByClassName(); Väljer alla element med matchande klassnamn, till exempel: var redBackground = document.getElementsByClassName(“bg_red”); denna kodrad gör det möjligt för oss att referera till alla element med klassen “bg_red” med konstanten som kallas redBackground; document.querySelector(); Denna metod returnerar det första elementet i DOM som matchar den eller de givna väljare. Väljarna som används kan vara taggnamn, klasser, id-attribut eller en blandning av de tre: document.querySelector(‘article’) — returnerar det första “article”-elementet document.querySelector(‘.text-center’) — returnerar första elementet med klassen “text-center” document.querySelector(‘#main’) — returnerar elementet med id-attributet “main” document.queryselector(‘h2.text-center’) — returnerar det första “h2”-elementet med klass “text-center”
Det finns ytterligare en metod jag skulle vilja lägga till i listan:
document.querySelectorAll();
Det returnerar ett Nod List-objekt, vilket är nästan detsamma som HTML-samlingsobjektet som vi kommenterade tidigare. Faktum är att vissa äldre webbläsare returnerar ett Nod List-objekt istället för en HTML-samling för metoder som getElementsByClassName().
Detta verkar lite förvirrande, så låt oss se vilka likheter och skillnader det finns mellan ett nodlistobjekt och ett HTML-samlingsobjekt:
De liknar båda en array-liknande lista med objekt men de är inte arrayer! du kan inte använda Array Methods, som valueOf(), push(), pop() eller join() på dem. Båda har en längdegenskap, vilket ger oss antalet objekt i listan. Båda använder ett index (som börjar med 0) så att var och en av deras objekt kan nås eller loopas igenom liknande hur vi skulle komma åt element i en array.
MEN:
HTML Collection-objekt kan nås med deras namn, id eller indexnummer. Nodlistobjekt kan endast nås med deras indexnummer. Endast objektet Nod List kan innehålla attributnoder och textnoder (vi har inte täckt dessa ännu).
Slutligen finns det DOM-metoder och egenskaper som gör att vi kan använda “familjerelationerna” mellan DOM-elementen för att navigera och välja dem (detta är själva “genomgången av DOM”). Men varför behöver vi lära oss att korsa DOM, om vi känner till metoder som document.querySelector?
Eftersom det alltid är snabbare och lättare att flytta från ett element till ett annat, och sedan göra en fullständig sökning.
Du kan korsa i tre riktningar:
Nedåt: element.children — returnerar en HTML-samling som innehåller alla underordnade element av element Sideways element.nextElementSibling + element.previousElementSibling — dessa tillåter oss att iterera genom element på samma relationsnivå, som mellan listobjekt Upwards element.parentElement — elementets överordnade element (vilket som helst element kan bara ha upp till en förälder)
För att sammanfatta – DOM tillåter JavaScript att komma åt och manipulera sidans innehåll. För att komma åt elementen måste vi bekanta oss med att använda motsvarande objektmetoder, som document.getElementById(), document.getElementsByClassName(), getElementsByTagName() och document.querySelector().
projekt
Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, sammanställa statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig annonser som är relaterade till dina preferenser. Genom att klicka på “Acceptera alla” godkänner du lagringen av cookies på din enhet för att förbättra webbplatsnavigering, analysera trafik och hjälpa våra marknadsföringsaktiviteter. Du kan också välja “Endast systemcookies” för att endast acceptera de cookies som krävs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på “inställningar”.
Acceptera alla Endast systemcookies Konfiguration
Alltid aktiv
Strikt nödvändiga cookies
Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs i allmänhet bara in som svar på dina handlingar när du begär tjänster, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Du kan ställa in din webbläsare för att blockera eller varna dig för dessa cookies, men vissa delar av webbplatsen kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information
