Accesarea elementelor DOM în consolă - Un ghid pas cu pas

În acest tutorial vei afla cum poți accesa elementele DOM din consola unei Chrome Developer Tools. Acest lucru este deosebit de important pentru dezvoltatorii web care lucrează cu elemente HTML și JavaScript. În acest tutorial video vei învăța multe sfaturi și trucuri utile pentru a selecta și manipula ușor elementele DOM.

Concluzii importante

• Poți accesa direct elementele DOM folosind variabile globale, funcții de consolă și scurtături.
• De asemenea, vei învăța cum să vezi și să modifici selecțiile anterioare.

Ghid pas cu pas

În primul rând, asigură-te că ai Developer Tools pentru Chrome deschise. Poți face acest lucru făcând clic dreapta pe o pagină web și selectând „Inspectare” sau folosind combinația de taste Ctrl + Shift + I.

Acum ne uităm cum poți accesa un anumit element DOM.

Dacă ai un element DOM pe pagina ta, cum ar fi unul cu ID-ul „App”, poți să accesezi acest element direct prin consolă. Toate elementele cu un ID sunt globale în obiectul window.

Poți apela acest ID cu ușurință tastând window.App în consolă. Asta îți va afișa elementul DOM corespunzător și îl poți extinde pentru a accesa subelementele și atributele acestuia.

Să presupunem că trebuie să apelezi o funcție a unui videoclip prezent pe pagina ta. Asta ai putea face cu play, cu condiția să suporte acestă metodă.

Pentru a vedea toate proprietățile și funcțiile unui element DOM, există funcția console.dir(). Dacă tastezi console.dir(window.App), vei primi o reprezentare clară a tuturor proprietăților și metodelor elementului DOM.

Dacă un element nu are un ID, totuși poți accesa acesta folosind document.querySelector(). Acest lucru funcționează și pentru document.body întreg, dacă dorești să accesezi acesta.

Pentru selecții mai specifice, poți folosi document.querySelector() sau document.querySelectorAll(), pentru a obține o listă de elemente care corespund selectorului dat.

Aceste liste pot fi tratate ca array-uri, astfel încât le poți converti cu Array.from() pentru a lucra cu elementele lor.

O scurtătură utilă pe care o poți folosi în consolă este $0. Astfel accesezi elementul DOM curent selectat în fila Elemente. Dacă tastezi $0 și apoi apesi enter, vei vedea care este elementul marcat curent.

În plus, s-au introdus și $1, $2, etc., pentru a accesa selecțiile anterioare. $1 este elementul pe care l-ai selectat anterior înainte de a selecta elementul actual.

Aceste scurtături îți fac mai ușoară accesarea mai multor elemente selectate și fac lucrul în consolă mai eficient.

Ține cont că, în timp ce folosești console.dir() și funcții similare, trebuie să fii precaut. Acestea ar trebui folosite în special pentru scopuri de depanare și nu ar trebui să fie folosite în codul de producție.

Acum poți accesa ușor elementele DOM care sunt selectate momentan, fără a avea nevoie de ID-uri specifice sau selecții complicate.

Rezumat

În acest ghid, am învățat diverse metode pentru a accesa elementele DOM în consola unei unelte de dezvoltare Chrome. Ai învățat cum să folosești ID-urile, funcțiile și selecționerele pentru a manipula elementele de pe site-ul tău.