I den här guiden kommer du lära dig hur du kan komma åt DOM-element i Chrome Developer Tools Console. Detta är särskilt viktigt för webbutvecklare som arbetar med HTML- och JavaScript-element. I den här Video-Tutorialen kommer du att lära dig många användbara tips och tricks för att enkelt välja och manipulera DOM-element.
Viktigaste insikter
- Du kan komma åt DOM-element direkt med globala variabler, konsolfunktioner och förkortningar.
- Du kommer också att lära dig hur du kan visa och manipulera tidigare valda element.
Steg-för-steg-guide
Först och främst bör du se till att ha Chrome Developer Tools öppet. Detta kan du göra genom att högerklicka på en webbsida och välja "Inspect" eller använda tangentkombinationen Ctrl + Shift + I.
Nu ska vi titta på hur man kan komma åt ett specifikt DOM-element.
Om du har ett DOM-element på din sida, till exempel ett med ID "App", kan du direkt nå detta element via konsolen. Alla element med ID är globalt tillgängliga i window-objektet.
Du kan enkelt komma åt detta ID genom att skriva window.App i konsolen. Det kommer att visa det motsvarande DOM-elementet och du kan veckla ut det för att komma åt dess underelement och attribut.
Låt oss säga att du behöver anropa en funktion för en video som finns på din sida. Det kan du göra med play, förutsatt att elementet stöder denna metod.
För att se alla egenskaper och funktioner i ett DOM-element finns funktionen console.dir(). Om du skriver console.dir(window.App) får du en översiktlig representation av alla egenskaper och metoder i DOM-elementet.
Om ett element inte har något ID kan du fortfarande nå det med document.querySelector(). Det fungerar även för hela document.body om du vill nå det.
För mer specifika val kan du använda document.querySelector() eller också document.querySelectorAll() för att få en lista med element som matchar given selektor.
Dessa listor kan behandlas som arrays, så du kan omvandla dem med Array.from() för att kunna arbeta med deras element.
En praktisk genväg som du kan använda i konsolen är $0. Med det kan du komma åt det aktuellt valda DOM-elementet i Element-avsnittet. Om du skriver $0 och trycker på retur-knappen, ser du vilket element som för närvarande är markerat.
Dessutom har även $1, $2 osv. införts för att komma åt tidigare valda element. $1 är elementet du valde tidigare innan du valde det aktuella.
Dessa genvägar underlättar åtkomsten till flera valda element och gör arbetet i konsolen effektivare.
Kom ihåg att man bör vara försiktig när man använder console.dir() och liknande funktioner. Dessa bör främst användas för felsökning och inte implementeras i produktionskoden.
Du kan nu enkelt komma åt DOM-element som är just valda och behöver inte specifika ID:er eller komplicerade selektorer för detta.
Sammanfattning
I den här guiden har vi lärt oss olika metoder för att komma åt DOM-element i Chrome Developer Tools Console. Du har lärt dig hur du kan använda IDs, funktioner och selektorer för att manipulera element på din webbplats.
Vanliga frågor
Hur kommer jag åt ett element utan ID?Använd document.querySelector() eller document.querySelectorAll().
Vad är $0 i konsolen?$0 representerar det för närvarande valda DOM-elementet i Elements-fliken.
Kan jag använda console.dir() i produktion?Nej, det är bättre att endast använda dessa funktioner för felsökning.
Vad gör jag om jag vill komma åt flera element?Använd document.querySelectorAll() och konvertera listan till en array.
Vilka försiktighetsåtgärder bör jag följa när jag använder konsolen?Undvik att använda felsökningsverktyg i produktionskoden för att undvika komplikationer.
