Als ik in de ontwikkelaarstools van Google Chrome een element selecteer, zie ik ==$0naast het geselecteerde element. Wat betekent dat?
Antwoord 1, autoriteit 100%
Het is de laatst geselecteerde DOM-knooppuntindex. Chrome wijst een index toe aan elk DOM-knooppunt dat u selecteert. Dus $0zal altijd verwijzen naar het laatste knooppunt dat je hebt geselecteerd, terwijl $1zal verwijzen naar het knooppunt dat je daarvoor hebt geselecteerd. Zie het als een stapel van meest recent geselecteerde knooppunten.
Beschouw als voorbeeld het volgende
<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>
Nu je de devtools-console hebt geopend en #sunday, #mondayen #tuesdayhebt geselecteerd in de genoemde volgorde, krijg je id’s zoals :
$0 -> <div id="tuesday"></div>
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>
Opmerking:
Het kan handig zijn om te weten dat het knooppunt selecteerbaar is in uw scripts (of console), bijvoorbeeld een populair gebruik hiervoor is de hoekelementselector, dus u kunt eenvoudig uw knooppunt kiezen en dit uitvoeren:
angular.element($0).scope()
Voila, je hebt via de console toegang gekregen tot de node scope.
Antwoord 2, autoriteit 19%
$0 retourneert het meest recent geselecteerde element of JavaScript-object,
$1 retourneert de tweede meest recent geselecteerde, enzovoort.
Raadpleeg: Opdrachtregel API-referentie
Antwoord 3, autoriteit 9%
De andere antwoorden hier leggen duidelijk uit wat het betekent. Ik leg graag het gebruik uit.
Je kunt een element selecteren op het tabblad elementsen overschakelen naar het tabblad consolein chrome. Typ gewoon $0 or $1of welk nummer dan ook en druk op enter en het element wordt voor uw gebruik in de console weergegeven.
Antwoord 4, autoriteit 5%
Dit is de hint van Chrome om je te vertellen dat als je $0 typt op de console, dit gelijk zal zijn aan dat specifieke element.
Intern houdt Chrome een stapel bij, waarbij $0 het geselecteerde element is, $1 het element is dat het laatst is geselecteerd, $2 het element is dat vóór $1 is geselecteerd, enzovoort.
Hier zijn enkele van de toepassingen:
- Toegang tot DOM-elementen vanaf console: $0
- Toegang tot hun eigenschappen vanaf console: $0.parentElement
- Hun eigenschappen bijwerken vanaf console: $1.classList.add(…)
- CSS-elementen bijwerken vanaf console: $0.styles.backgroundColor=”aqua”
- CSS-gebeurtenissen activeren vanaf console: $0.click()
- En veel complexere dingen doen, zoals: $0.appendChild(document.createElement(“div”))
Bekijk dit allemaal in actie:
Ondersteunende verklaring:
Ja, ik ben het ermee eens dat er betere manieren zijn om deze acties uit te voeren, maar deze functie kan van pas komen in bepaalde ingewikkelde scenario’s, zoals wanneer op een DOM-element moet worden geklikt, maar dit niet mogelijk is vanuit de gebruikersinterface omdat het wordt gedekt door andere elementen of om een of andere reden op dat moment niet zichtbaar is in de gebruikersinterface.
Antwoord 5
Ik zal zeggen dat het slechts een verkorte syntaxis is voor het verkrijgen van een verwijzing naar het html-element tijdens de foutopsporingstijd, normaal gesproken wordt dit soort taken met deze methode uitgevoerd
document.getElementById , document.getElementsByClassName , document.querySelector
dus klikken op een html-element en het verkrijgen van een referentievariabele ($0) in de console is een enorme tijdsbesparing gedurende de dag