Tilgang til DOM-elementer i konsollen – En trinnvis veiledning

I denne veiledningen vil du lære hvordan du kan få tilgang til DOM-elementer i konsollen til Chrome Developer Tools. Dette er spesielt viktig for webutviklere som jobber med HTML- og JavaScript-elementer. I video-opplæringen vil du lære mange nyttige tips og triks for å enkelt velge og manipulere DOM-elementer.

Viktigste funn

• Du kan få tilgang til DOM-elementer direkte ved hjelp av globale variabler, konsollfunksjoner og snarveier.
• Du vil også lære hvordan du kan se og manipulere tidligere valg.

Trinn-for-trinn-veiledning

Først må du forsikre deg om at du har åpnet Chrome Developer Tools. Dette kan gjøres ved å høyreklikke på en nettside og velge "Undersøk" eller ved å bruke tastekombinasjonen Ctrl + Shift + I.

Nå ser vi på hvordan man kan få tilgang til et spesifikt DOM-element.

Hvis du har et DOM-element på siden din, for eksempel med ID-en "App", kan du henvende deg direkte til dette elementet via konsollen. Alle elementer med en ID er globale i vindusobjektet.

Du kan enkelt kalle opp denne ID-en ved å skrive window.App i konsollen. Dette vil vise deg det tilsvarende DOM-elementet så du kan folde det ut for å få tilgang til dets underelementer og attributter.

La oss si at du må kalle opp en funksjon for en video som er tilgjengelig på siden din. Dette kan gjøres ved å skrive play, forutsatt at elementet støtter denne metoden.

For å se alle egenskaper og funksjoner til et DOM-element, kan du bruke funksjonen console.dir(). Hvis du skriver console.dir(window.App), vil du få en oversiktlig fremstilling av alle egenskaper og metoder til DOM-elementet.

Hvis et element ikke har en ID, kan du fortsatt få tilgang til det ved å bruke document.querySelector(). Dette fungerer også for hele document.body hvis du ønsker å få tilgang til det.

For mer spesifikke valg kan du bruke document.querySelector() eller document.querySelectorAll() for å få en liste over elementer som samsvarer med den gitte velgeren.

Disse listene kan behandles som matriser, slik at du kan konvertere dem med Array.from() for å kunne jobbe med elementene i dem.

En praktisk snarvei du kan bruke i konsollen er $0. Dette lar deg få tilgang til det nåværende valgte DOM-elementet i Elements-Tab. Hvis du skriver $0 og trykker enter, vil du se hvilket element som for øyeblikket er valgt.

I tillegg har man også introdusert $1, $2, etc. for å få tilgang til tidligere valg. $1 er elementet du valgte før det nåværende valget.

Disse snarveiene gjør det lettere å få tilgang til flere valgte elementer og gjør det mer effektivt å arbeide i konsollen.

Husk at ved bruk av console.dir() og lignende funksjoner, bør det utvises forsiktighet. Disse bør primært brukes til feilsøking og ikke i produksjonskoden.

Du kan nå enkelt få tilgang til DOM-elementene som er valgt akkurat nå, uten behov for spesifikke ID-er eller kompliserte velgere.

Oppsummering

I denne veiledningen har vi lært ulike metoder for å få tilgang til DOM-elementer i konsollen til Chrome Developer-verktøy. Du har lært hvordan du kan bruke ID-er, funksjoner og selektorer for å manipulere elementer på nettstedet ditt.