Selles juhendis saate teada, kuidas pääseda ligi Chrome'i arendajatööriistade konsooli DOM-elementidele. See on eriti oluline veebiarendajatele, kes töötavad HTMLi ja JavaScripti elementidega. Selles video-õpetuses saate õppida palju kasulikke näpunäiteid ja trikke, kuidas hõlpsalt valida ja muuta DOM-elemente.
Põhilised teadmised
- Saate globaalsete muutujate, konsoolifunktsioonide ja otseteede abil pääseda otse DOM-elementidele ligi.
- Lisaks saate õppida, kuidas vaadata ja muuta eelnevaid valikuid.
Sammsammuline juhend
Esiteks peaksite veenduma, et olete avanud Chrome'i arendajatööriistad. Seda saate teha, klõpsates veebilehel paremklõpsuga ja valides "Vaata" või kasutades kiirklahvide kombinatsiooni Ctrl + Shift + I.
Nüüd vaatame, kuidas pääseb ligi konkreetsele DOM-elementile.
Kui teil on veebisaidil DOM-element, nagu näiteks ID-ga "App", saate sellele elemendile kohe konsooliga juurde pääseda. Kõik ID-ga elemendid on globaalselt saadaval window-objektis.
Selle ID saate lihtsalt välja kutsuda, sisestades konsoolil window.App. See kuvab teile vastava DOM-elemendi ja saate selle avada, et pääseda selle alamteemadele ja atribuutidele.
Oletame, et peate kutsuma välja video funktsiooni, mis on olemas teie lehel. Seda saate teha play abil, eeldusel, et element seda meetodit toetab.
Kõikide üksuste ja funktsioonide nägemiseks DOM-elemendil on funktsioon console.dir(). Kui sisestate console.dir(window.App), saate loetletud kõik DOM-elemendi atribuudid ja meetodid.
Kui elemendil pole ID-d, saate sellele siiski juurde pääseda, kasutades document.querySelector(). See kehtib ka kogu document.body kohta, kui soovite sellele juurde pääseda.
Detailsemate valikute jaoks saate kasutada document.querySelector() või ka document.querySelectorAll(), et saada loetelu elementidest, mis vastavad antud valijale.
Neid loendeid saab käsitleda nagu massiive, nii et saate need konverteerida Array.from() abil, et nendega töötada.
Konsoolis saate kasutada mugavat otseteed $0. Nii pääsete juurde praegu valitud DOM-elemendile Elementide vahekaardil. Kui sisestate $0 ja vajutate enter, näete, milline element on praegu valitud.
Lisaks on kasutusele võetud ka $1, $2 jne, et pääseda eelnevate valikute juurde. $1 on element, mille valisite enne praeguse valimist.
Need otseteed võimaldavad teil efektiivsemalt töötada ja muudavad mitmete valitud elementidele juurdepääsu konsoolis hõlpsamaks.
Pidage meeles, et kasutades funktsioone nagu console.dir(), tuleb olla ettevaatlik. Neid tuleks kasutada eelkõige silumisotstarbel ega tohiks kasutada tootmiskoodis.
Nüüd saate hõlpsalt pääseda ligi just valitud DOM-elementidele ega vaja selleks spetsiifilisi ID-sid ega keerulisi valijaid.
Kokkuvõte
Selles juhendis õppisime erinevaid meetodeid, kuidas Chrome'i arendajatööriista konsoolis DOM-elementidele juurde pääseda. Oled õppinud, kuidas kasutada ID-sid, funktsioone ja valijaid, et muuta elemente oma veebisaidil.
Korduma kippuvad küsimused
Kuidas pääseda juurde elemendile ilma ID-ta?Kasuta document.querySelector() või document.querySelectorAll().
Mis on $0 konsoolis?$0 tähistab hetkel valitud DOM-elementi Elementide vahekaardil.
Kas ma saan console.dir() tootmises kasutada?Ei, on parem kasutada neid funktsioone ainult tõrkeotsinguks.
Mida teha, kui soovin juurde pääseda mitmele elemendile?Kasuta document.querySelectorAll() ja teisenda loend massiiviks.
Milliseid ettevaatusabinõusid peaksin järgima, kasutades konsooli?Vältige tõrkeotsingu tööriistade kasutamist tootmiskoodis, et vältida keerukusi.
