Šioje instrukcijoje sužinosite, kaip į DOM elementus naršyklės Chrome Developer Tools konsolėje galite prieiti. Tai ypač svarbu tinklalapių kūrėjams, kurie dirba su HTML ir JavaScript elementais. Video pamokinyje sužinosite daugybę naudingų patarimų ir gudrybių, kaip lengvai pasirinkti ir manipuliuoti DOM elementais.
Svarbiausios išvados
- Galite naudoti globalias kintamąsias, konsolės funkcijas ir sutrumpinimus tiesiogiai prieiti prie DOM elementų.
- Be to, sužinosite, kaip peržiūrėti ir manipuliuoti praeitomis atrinkimais.
Paeiliui vadovas
Pirmiausia įsitikinkite, kad atidarėte Chrome Developer Tools. Tai galite padaryti spustelėję dešinįjį pelės mygtuką ant tinklalapio ir pasirinkę „Tyrinėti“, arba naudodami kombinaciją Ctrl + Shift + I.
Dabar pažvelkime, kaip galima pasiekti konkretų DOM elementą.
Jei turite DOM elementą savo puslapyje, pvz., su ID „App“, galite tiesiogiai pasiekti šį elementą per konsolę. Visi elementai su ID yra pasiekiami globaliai window objekte.
ID galite lengvai pasiekti įvedę window.App konsolėje. Tai jums parodytų atitinkamą DOM elementą ir galėtumėte jį atverti, kad pasiektumėte jo subelementus ir atributus.
Pasvarstykime, jei turite šalia savo puslapyje esantį vaizdo funkciją, kuri yra šioje puslapio, galėtumėte tai padaryti su play, jei elementas palaiko šį metodą.
Norėdami pamatyti visus DOM elemento savybes ir funkcijas, galite naudoti funkciją console.dir(). Jei įvedate console.dir(window.App), gausite tvarkingą DOM elemento savybių ir metodų išdėstymą.
Jei elementas neturi ID, vis tiek galite jį pasiekti naudodami document.querySelector(). Tai veikia taip pat ir dokument.body visumai, jei norite prie jo prieiti.
Siekiant gauti specifiškesnius atrinkimus, galite naudoti document.querySelector() arba document.querySelectorAll(), kad gautumėte elementų sąrašą, kurie atitinka duotą atrankinį.
Šie sąrašai gali būti tvarkomi kaip masyvai, todėl juos galite paversti į masyvą su Array.from(), kad galėtumėte su jais dirbti.
Vienas patogus sutrumpinimas, kurį galite naudoti konsolėje, yra $0. Taip jūs pasiekiate dabar atrinktą DOM elementą elemento skirtuke. Įvedę $0 ir paspaudę grįžtą, matysite, kuris elementas dabar yra pažymėtas.
Be to, buvo pristatyti $1, $2 ir tt. su šiais sutrumpinimais norint pasiekti ankstesnius atrinkimus. $1 yra elementas, kurį prieš tai išsirinkote, prieš pasirinkdami dabartinį elementą.
Šie sutrumpinimai palengvina jums prieigą prie kelių atrinktų elementų ir darbą konsolėje efektyviau daro.
Atminkite, kad naudojant console.dir() ir panašias funkcijas būtinas atsargumas. Jos turėtų būti naudojamos ypač tik derinimo tikslais ir neturėtų būti taikomos iš karto produkciniam kode.
Dabar galite lengvai pasiekti DOM elementus, kurie yra šiuo metu atrinkti, ir nereikia turėti konkretaus ID ar sudėtingų atrinkimų.
Susiejimas
Šiame vadove mes išmokome skirtingus būdus, kaip pasiekti DOM elementus „Chrome Developer Tools“ konsolėje. Jūs išmokote, kaip naudoti ID, funkcijas ir selektorius, kad galėtumėte manipuliuoti elementais savo tinklalapyje.
Dažniausiai užduodami klausimai
Kaip pasiekti elementą be ID?Naudokite document.querySelector() arba document.querySelectorAll().
Kas yra $0 konsolėje?$0 atstovauja dabar pažymėtajam DOM elementui Elements skirtuke.
Ar galiu naudoti console.dir() gamyboje?Ne, geriau naudoti šias funkcijas tik atkodavimo tikslais.
Ką daryti, jei noriu pasiekti daugiau nei vieną elementą?Naudokite document.querySelectorAll() ir konvertuokite sąrašą į masyvą.
Kokias atsargumo priemones turėčiau laikytis, naudodamasis konsolės įrankiais?Vengti naudoti atkodavimo įrankius gamybos kodui, siekiant išvengti komplikacijų.
