V tej vadnici boste izvedeli, kako dostopati do DOM elementov v konzoli orodij za razvijalce Chrome. To je še posebej pomembno za spletnie razvijalce, ki delajo z HTML in JavaScript elementi. V video-vodiču boste spoznali veliko koristnih namigov in trikov za enostavno izbiranje in manipulacijo DOM elementov.
Najpomembnejši ugotovitvi
- Lahko dostopate do DOM elementov z globalnimi spremenljivkami, konzolskimi funkcijami in bližnjicami.
- Poleg tega se naučite, kako pregledati in manipulirati prejšnje izbire.
Korak-po-korak vadnica
Najprej se prepričajte, da imate odprta orodja za razvijalce Chrome. To lahko storite tako, da kliknete desno miškino tipko na spletni strani in izberete "Pregledovanje" ali uporabite bližnjico Ctrl + Shift + I.
Zdaj si oglejmo, kako dostopati do določenega DOM elementa.
![Dostop do elementov DOM v konzoli - Korak za korakom vodnik Dostop do elementov DOM v konzoli – vodeni korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-6.webp?tutkfid=226741)
Če imate DOM element na svoji strani, na primer z ID "App", lahko ta element neposredno nagovorite prek konzole. Vsi elementi z ID-jem so globalno na voljo v objektu window.
![Dostop do DOM elementov v konzoli - vodnik po korakih Dostop do DOM elementov v konzoli - Vodnik korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-21.webp?tutkfid=226742)
ID lahko enostavno pokličete tako, da v konzolo vnesete window.App. To vam bo prikazalo ustrezen DOM element in ga lahko razširite, da dostopate do njegovih podelementov in atributov.
Recimo, da morate poklicati funkcijo videa, ki je na vaši strani. To lahko storite z uporabo play, če ta element podpira to metodo.
![Dostop do DOM-elementov v konzoli - Vodič korak za korakom Dostop do DOM elementov v konzoli - vodnik korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-71.webp?tutkfid=226744)
Če želite videti vse lastnosti in funkcije DOM elementa, uporabite funkcijo console.dir(). Če v konzolo vnesete console.dir(window.App), boste dobili pregleden prikaz vseh lastnosti in metod DOM elementa.
![Dostop do DOM elementov v konzoli - Vodič po korakih Dostop do DOM elementov v konzoli - Vodnik po korakih](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-92.webp?tutkfid=226745)
Če element nima ID-ja, nanj še vedno lahko dostopate z uporabo document.querySelector(). To velja tudi za celoten document.body, če nanj želite dostopati.
![Dostop do elementov DOM v konzoli - Navodila korak za korakom Dostop do DOM elementov v konzoli - Vodnik korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-139.webp?tutkfid=226747)
Za bolj specifične izbire lahko uporabite document.querySelector() ali tudi document.querySelectorAll(), da dobite seznam elementov, ki so glede na dani izbirnik.
![Dostop do DOM elementov v konzoli - postopek za korakom vodnik Dostop do elementov DOM v konzoli – Vodnik po korakih](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-159.webp?tutkfid=226749)
Te sezname lahko obravnavate kot sezname, zato jih lahko pretvorite z Array.from(), da lahko delate z njihovimi elementi.
Praktična bližnjica, ki jo lahko uporabite v konzoli, je $0. S tem dostopate do trenutno izbranega DOM elementa v zavihku Elementi. Če vnesete $0 in pritisnete tipko za vrnitev, boste videli, kateri element je trenutno označen.
![Dostop do elementov DOM v konzoli - Navodila korak za korakom Dostop do DOM-elementov v konzoli - vodič korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-219.webp?tutkfid=226755)
Poleg tega so bili uvedeni tudi $1, $2, in tako naprej, da dostopate do prejšnjih izbir. $1 je element, ki ste ga izbrali preden ste izbrali trenutnega.
![Dostop do elementov DOM v konzoli - Vodnik korak za korakom Dostop do elementov DOM v konzoli - vodnik po korakih](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-286.webp?tutkfid=226758)
Te bližnjice vam olajšajo dostop do več izbranih elementov in naredijo delo v konzoli bolj učinkovito.
![Dostop do elementov DOM v konzoli - Vodnik korak za korakom Dostop do DOM elementov v konzoli - vodnik korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-311.webp?tutkfid=226762)
Ne pozabite, da je pri uporabi console.dir() in podobnih funkcij potrebna previdnost. Te bi morale biti predvsem uporabljene za namene odpravljanja napak in ne za uporabo v produkcijski kodi.
![Dostop do DOM elementov v konzoli - vodnik korak za korakom Dostop do elementov DOM v konzoli - Navodila korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-399.webp?tutkfid=226766)
Zdaj lahko enostavno dostopate do DOM elementov, ki so trenutno izbrani, in za to ne potrebujete posebnih ID-jev ali zapletenih izbirnikov.
![Dostop do DOM-elementov v konzoli - Vodnik korak za korakom Dostop do elementov DOM v konzoli - Navodila korak za korakom](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-429.webp?tutkfid=226770)
Povzetek
V tem vodiču smo se naučili različne metode za dostop do DOM elementov v konzoli orodij za razvijalce Chroma. Naučili ste se, kako uporabiti ID-je, funkcije in selektorje za manipulacijo elementov na vaši spletni strani.
Pogosta vprašanja
Kako dostopam do elementa brez ID-ja?Uporabi document.querySelector() ali document.querySelectorAll().
Kaj je $0 v konzoli?$0 predstavlja trenutno izbrani DOM element v zavihku Elementi.
Ali lahko uporabim console.dir() v produkcijskem okolju?Ne, bolje je uporabiti te funkcije le za namene odpravljanja napak.
Kaj storiti, če želim dostopati do več elementov?Uporabi document.querySelectorAll() in pretvori seznam v polje.
Kakšne previdnostne ukrepe naj upoštevam pri uporabi konzole?Izogibaj se uporabi orodij za odpravljanje napak v produkcijskem kodi, da preprečiš težave.