Pieeja DOM elementiem konsolē - Soli pa solim instrukcija

Šajā instrukcijā tu uzzināsi, kā piekļūt DOM elementiem Chrome Developer Tools konsolē. Tas ir īpaši svarīgi tīmekļa izstrādātājiem, kas strādā ar HTML un JavaScript elementiem. Video instrukcijā tu apgūsi daudz noderīgu padomu un triku, lai viegli atlasītu un manipulētu DOM elementus.

Svarīgākie secinājumi

• Tu vari piekļūt DOM elementiem, izmantojot globālās mainīgās, konsolas funkcijas un saīsinājumus.
• Tāpat tu mācīsies, kā noskatīties un manipulēt iepriekšējās atlases.

Pakāpe-pa-pakāpe Instrukcija

Pirmkārt, pārliecinies, ka esi atvēris Chrome Developer Tools. To vari izdarīt, klikšķinot ar labo peles taustiņu uz tīmekļa lapas un izvēloties "Pārbaudīt" vai izmantojot taustiņu kombināciju Ctrl + Shift + I.

Tagad mēs aplūkosim, kā piekļūt konkrētam DOM elementam.

Ja tavā lapā ir DOM elements, piemēram, elements ar ID "App", to vari tieši piekļūt caur konsoli. Visiem elementiem ar ID ir globālas pieejamības window objektā.

Tu vari viegli piekļūt šim ID, ievadot window.App konsolē. Tas rādīs attiecīgo DOM elementu un tu vari to izvērst, lai piekļūtu tā apakšelementiem un atribūtiem.

Pieņemsim, ka tev ir jāizsauc funkcija no video, kas ir tavā lapā. To vari darīt, piemēram, izmantojot play, ja elements atbalsta šo metodi.

Lai redzētu visus DOM elementa īpašības un funkcijas, izmanto funkciju console.dir(). Ievadot console.dir(window.App), tu saņemsi pārskatāmu DOM elementa visu īpašību un metodiku attēlojumu.

Ja elementam nav ID, tu joprojām vari piekļūt tam, izmantojot document.querySelector(). Tas darbojas arī visam document.body, ja vēlies piekļūt tam.

Sīkākai atlasei vari izmantot document.querySelector() vai document.querySelectorAll(), lai saņemtu elementu sarakstu, kas atbilst dotajam atlasītājam.

Šos sarakstus var rīkoties kā ar masīviem, pārveidojot tos ar Array.from(), lai strādātu ar to elementiem.

Noderīgs saīsinājums, ko vari izmantot konsolē, ir $0. Tas ļauj piekļūt pašreiz atlasītajam DOM elementam elementu cilnē. Ievadot $0 un nospiežot "return", tu redzēsi, kura elements ir pašlaik iezīmēts.

Papildus tika ieviesta arī $1, $2, u.c., lai piekļūtu iepriekšējām atlases. $1 ir elements, ko iepriekš atlasīji pirms pašreiz atlasīji to.

Šie saīsinājumi atvieglo vairāku atlasīto elementu piekļuvi un padara darbu konsolē efektīvāku.

Atcerieties, ka izmantojot console.dir() un līdzīgas funkcijas, ir jābūt piesardzīgam. Tās galvenokārt jāizmanto pārbaudes nolūkiem un nevajadzētu izmantot ražošanas kodā.

Tagad vari viegli piekļūt pašlaik atlasītajiem DOM elementiem, un nevajadzēs specifiskas ID vai sarežģītas atlasītājas.

Kopsavilkums

Šajā pamācībā esam iepazinušies ar dažādām metodēm, kā piekļūt DOM elementiem Chrome Developer Tools konsolē. Tu esi iemācījies, kā izmantot ID, funkcijas un atlasītājus, lai manipulētu elementus savā tīmekļa vietnē.