Ändring av DOM
I den tidigare artikeln Första stegen in i JavaScript – en praktisk guide täckte vi grunderna i DOM och dess relation till att vi blir JS-läskunniga. Nu när vi vet hur man kommer åt DOM-element kan vi fortsätta att lära oss hur man ändrar dem.
Men innan vi börjar, låt oss se till att vi är bekanta med några fakta:
När vi pratar om HTML-element i DOM, talar vi faktiskt om objekt (det är deras definition). Objekt har egenskaper (detta betyder värden som vi kan få eller ställa in) och metoder (eller åtgärder, saker vi kan göra med/med objekten). Programmeringsgränssnittet är egenskaperna och metoderna för varje objekt. Nu när vi har klarat det här kan vi börja göra ändringar.
Ändra innehåll:
Många gånger är två enkla egenskaper allt vi behöver använda för att göra det. Den första av dem är textContent. Den använder rak text, analyserar inte HTML och är därför snabbare. Dess utdata är text/oformaterad.
Å andra sidan har vi innerHTML, som analyserar innehåll som HTML, matar ut text/html och därmed tar längre tid.
Här är ett enkelt exempel på hur dessa två skiljer sig:
let myLink = document.getElementById(‘myLink’); myLink.textContent = ‘Ma-No Web‘;
Detta ger oss följande utdata:
Men när vi använder:
myLink.innerHTML = ‘Ma-No Web‘;
Vår produktion blir:
Ma-No Web
Ändra CSS-klasser
Detta görs enkelt genom att använda egenskapen classList och sedan motsvarande metod (lägg till, ta bort):
myElement.classList.add(className); myElement.classList.remove(className);
Vad skulle bli resultatet av:
låt h2 = document.getElementById(‘#heading2); h2.classList.add(‘red’,’underlined’); h2.classList.remove(‘red’);
Jo, det valda elementet, i vårt fall skulle h2 först få två nya CSS-klasser (“röda” och “understrukna”) och sedan förlora en klass i nästa steg (“röd);
Som du kan se är det möjligt att lägga till flera kommaseparerade klasser med metoden classList.add().
En viktig sak att notera här, som även om det kan tyckas självklart tycker jag är bra att anmärka på: classList är en egenskap, och kan bara anropas på ett enstaka element, i vårt exempel kallade vi det på ett enda h2-element, vilket vi fick nås med metoden getElementById. Om vi försökte komma åt en samling element, med till exempel getElementsByTagName, skulle egenskapen classList inte vara tillgänglig.
Ändra stilar
Ibland behöver vi bara göra en snabb förändring av stilen på vårt element, och vi kan göra detta utan att behöva skapa en CSS-klass helt enkelt genom att använda stilegenskapen:
header.style.margin = ’10px’;
Vi använder bara ett elements stilegenskap för att direkt ändra dess stilar.
Arbeta med attribut
Det verkar som en logisk sak att vilja kunna lägga till eller ändra ett elements attribut, och det är ganska lätt att göra det. Vi behöver bara bekanta oss med några metoder, med riktigt självförklarande namn:
Metoden setAttribute(), där vi skickar två argument – namnet på attributet vi vill ställa in och dess värde. Metoden lägger sedan till det angivna attributet till ett element och ger det det angivna värdet. På så sätt kan vi ändra till exempel elementets ID, men även klass, stil etc. Här är ett exempel:
myElement.setAttribute(“id”,”#01″); eller document.getElementById(“myLink”).setAttribute(“href”, “https://www.ma-no.org”);
Metoden removeAttribute() tar bort det angivna attributet från ett element. Använd metoden getAttribute() för att returnera värdet av ett attribut för ett element. Om det angivna attributet redan finns är endast värdet satt/ändrat.
Kanske undrar några av er, om vi kan modifiera attribut med dessa metoder, varför inte använda dem för att också ändra “stil”-attributen. Även om det är möjligt, rekommenderas det inte.
Istället använder vi egenskaper för Style-objektet som vi beskrev tidigare, eftersom vi på så sätt säkerställer att andra CSS-egenskaper som kan anges i style-attributet inte kommer att skrivas över.
Lägger till nya element
Vi måste följa dessa steg för att skapa och lägga till nya element på vår sida:
först skapar vi elementet vi behöver genom att anropa createElement DOM-metoden, så här: let mySection = document.createElement(‘section’); nu har vi skapat vår nya sektion, men den är tom, vi kanske vill lägga till några element till den. Dessa element måste också skapas först, så återigen använder vi metoden createElement och lagrar dessa nybyggda element i variabler: let myArticle = document.createElement(‘article’); låt myParagraph = document.createElement(‘p’); Även om dessa variabler än så länge inte är synliga för oss, har de referenser till DOM-element och på grund av detta kan vi använda metoderna vi har nämnt tidigare för att lägga till innehåll: myParagraph.textContent = “whatever”; Trevlig! Nu finns elementen någonstans där ute, i DOM. Låt oss sätta ihop dem med metoden appendChild. Först lägger vi till stycket till artikeln och artikeln till avsnittet: mySection.appendChild(myArticle); Slutligen måste vi lägga till vår sektion till något element som redan finns i DOM, som till exempel ‘main’. Kom ihåg att för att komma åt ‘main’-elementet använder vi till exempel metoden getElementByTagName: document.getElementByTagName(‘main’).appendChild(‘mySection); Och vad händer om vi behöver byta ut eller ta bort ett element?
Vi använder antingen replaceChild()- eller removeChild()-metoden, enligt våra behov. Observera att båda metoderna anropar föräldern till elementet du vill ta bort. Så att ta bort ett element när vi inte har direkt tillgång till det överordnade elementet kan göras med detta lilla trick:
myElement.parentElement.removeChild(myElement);
En kort sammanfattning:
Efter att ha fått tillgång till våra DOM-element vill vi modifiera dem. Detta görs genom att antingen använda deras egenskaper eller metoder. Vi kan skapa och lägga till nya element till DOM, modifiera elementens klasser och stil och modifiera deras attribut.
Och det är allt! Det här är grunderna du behöver veta så att vi kan ta oss upp en nivå och lära oss hur vi får mer magiska saker att hända, som att reagera på händelser (som musklick eller formulärinmatningar).
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
