Welkom terug.
In deze video gaan we tijd besteden aan het praten over de verschillende manieren van het selecteren van elementen met behulp van javascript en de pop.
Voordat we praten over de feitelijke selectors we nodig hebben om gewoon bekijken het document nog een keer.
Vergeet niet dat onze hele dorm alle objecten alle voorstellingen van onze elementen alle leven in dit document object.
Het is het hoogste niveau object of de root-node.
Zo snel Laten we het openstellen van elke browser-venster.
Ik ga naar Google te gebruiken en laten we proberen het typen van deze vier lijnen.
Dus het openstellen van de console en het type document dot u l en het toont ons de URL van de pagina die we op.
U kunt dit doen document dot banden en dat is een hele lijst van elke link op de pagina.
Elke ankertag we kunnen document dat Vadi en dit is het hele lichaam met elk ander element erin, dat leeft in het lichaam te doen en kunnen we document dot hoofd doen.
Dus we hebben dit al gezien in de laatste paar video's.
De reden dat ik het je weer te zien ben is dat alle van de selectors alle methoden gaan we ook leren leven in het document.
Dus alles wat we leren in deze video gaat om te beginnen met een document dot iets.
Dus ik zal je laten zien wat die nog wat zijn.
Er zijn vijf belangrijkste methoden gaan we over praten in deze video.
Ze zijn allemaal ingebouwd in het document.
Ze beginnen allemaal met document stip.
Je kunt ze hier te zien krijgen element door id krijgen elementen per klasse naam krijgen elementen op tag naam queery selector en queery selector.
Alle als je kunt terug naar de video die ik heb over het toevoegen van methoden om een ​​object waar we eigenlijk een functie zou kunnen slaan als een waarde in plaats van een object te denken.
We hadden als kat ruimte in honden de ruimte en we moesten methode die we toegevoegd aan onze hond de ruimte object spreken.
Dat is precies wat hier gebeurt.
Deze vijf methoden zijn allemaal toegevoegd aan het document object.
Dus voordat we hier eigenlijk aan de slag wil ik u de H-G mail die ik ga gebruiken voor demonstratiedoeleinden.
Het is een zeer eenvoudige pagina heeft slechts een paar elementen.
Dus onze normale kop is vrijwel leeg afgezien van een titel of lichaam.
En vervolgens in het lichaam H-1 is er een die hello zegt.
Een ander die zegt vaarwel.
En dan drie bondgenoten in plaats van een UL en die drie bondgenoten item in de lijst een twee en drie zijn iets anders.
De eerste heeft een ID hoogtepunt en de laatste te zijn een klasse met de naam vetgedrukt.
Dus we gaan gebruiken.
Het feit dat sommige van hen zijn H-1 een aantal van de elementen zijn bondgenoten.
Sommige hebben klassen.
Men heeft een ID.
We gaan die verschillende eigenschappen gebruiken om ze op verschillende manieren en verschillende combinaties te selecteren.
Dus ik ben met behulp van dezelfde code hier in de voorbeelden en ik ben het tekenen van een groene doos, zodat je kunt zien in de komende paar dia's.
Een groene doos in de buurt van wat is geselecteerd.
OK dus laten we beginnen met de eerste methode.
Krijg element door ID.
Dus de naam is een beetje voor zichzelf.
Het duurt in een ID naam en het gaat om het ene element dat overeenkomt met dat ID terugkeren.
Vergeet niet dat een ID slechts één keer kan voorkomen op een pagina.
Dus hier is een voorbeeld document bedijkt get element door ID.
Highlight gaat deze bondgenoot die Id hoogtepunt heeft dus het object selecteert selecteren en vervolgens stuurt het terug naar ons.
Ik zal al snel blijkt dat in de raad.
Dus we zullen het openstellen van de console naar een documenttype get element door id hoogtepunt dat is onze ID-naam.
Laten we opslaan in een variabele met de naam tag.
Druk op enter.
En laten we eens kijken naar TAG.
En je ziet het geeft ons de eerste lijn die ID gelijk is aan markeren heeft.
Zo selecteerden we iets door een ID.
Opnieuw wordt toont ons alsof het hem eigenlijk goed is ouder, maar het resultaat van dit is eigenlijk een javascript-object.
Dus we kunnen doen dat geannuleerd die Diyar weer op tag.
En dit is eigenlijk hoe het eruit ziet.
Al deze eigenschappen.
Dus dit is gewoon een leuke snelkoppeling voor ons om visueel te zien wat we geselecteerd, maar in werkelijkheid is het een object representatie.
Oké dus dat is alles wat er te krijgen door het element ID.
We noemen de methode die we passeren in één tekenreeksargument de naam van een ID die we willen en dan gaat het en vindt de bijpassende element dat dezelfde ID heeft en het keert het object representatie voor ons.
De volgende is krijgt elementen per klasse naam, zodat zijn naam vertelt je precies wat het doet.
Net als krijgt element door ID.
Hoewel dit is iets anders Krijg elementen meervoud met een S op naam van de klasse.
Vergeet niet een klasse kan optreden zo vaak als we willen op een pagina.
Zo komen we in een string, zoals vet en dat gaat om een ​​lijst van alle elementen op de pagina die de naam matching klasse vet terug te keren.
In dit geval zijn er twee van hen, maar als er tienduizend elementen op de pagina die die klasse hadden we zouden allemaal 10000 krijgen in een lijst.
Dus laten we gaan demonstreren dit zo zal document get element waardeert per klasse naam en je kunt zien als we dit kleine autocomplete hier, dus we degene die we willen elementen per klasse naam en vervolgens de naam van de klasse die we willen is vetgedrukt kunt selecteren.
Laten we opslaan in een variabele.
Tags geen tag, maar labels want we gaan naar meerdere tags terug te krijgen als we kijken naar wat labels is.
Het is een lijst van de twee ligt zowel met klasse gelijk is aan vet.
Technisch gezien is het niet een array.
Het is zoiets als een knooppunt lijst die matrix gelijk.
Ik beschouw het als een lichtgewicht array.
Dus het komt met een aantal van de dingen die je zou verwachten van een array.
Maar sommige van de meer geavanceerde functies zijn eigenlijk ontbreekt.
Zo bijvoorbeeld kunnen we toegang elementen zoals deze met behulp van een index-tags 0.
We kunnen tags om overvleugelen doen, maar we kunnen niet voor elke lus labels punt voor elk doen.
En als ik gewoon doen dit het gaat om me te vertellen labels zijn voor elk.
Het is niet een functie.
Dat komt omdat er geen foreach gedefinieerd voor deze knooppunt lijsten die is gedefinieerd voor arrays en deze zijn niet arrays.
En net als bij krijgen element door id toont ons deze mooie string representatie, maar achter de schermen is het eigenlijk een object.
Dus weer gewoon om te bewijzen dat u troosten dot DIR en we doen tag nul.
En het is eigenlijk deze grote complex gek object met tal van eigenschappen.
OK dus laten we elementen per klasse naam.
Het geeft een lijst.
Niet helemaal een array.
En het bevat elk element op de pagina die overeenkomt met de opgegeven naam van de klasse die wij leveren.
Next up hebben we elementen van getagde naam.
Dus dit werkt net als krijgt element op ID of krijgen elementen per klasse naam.
Behalve dat geeft een lijst van elementen die overeenkomen met een bepaalde tag naam als Ally of H-1.
Dus in dit geval Ik ben actief document dight krijgen elementen op tag naam Alhaj dat gaat om terug te keren naar me een lijst van de drie bondgenoten die er bestaan ​​op deze pagina.
Dus nogmaals laten we aantonen dat var-tags gelijk document dat elementen op tag naam te krijgen en laten we het doen Alhaj eerste en laten we eens kijken naar labels en krijgen we deze lijst ook niet helemaal een array is het een knooppunt lijst die drie bondgenoten heeft en ik zal het niet bewijzen om je deze keer.
Ik ging naar de consul dat DJR.
Maar dit zijn objecten die ze zijn niet alleen strings of niet.
H tim l ze zijn eigenlijk javascript objecten met al die eigenschappen.
Dus ik kan hetzelfde doen voor H-1.
Dus we zullen allemaal h degenen te selecteren en we kijken naar labels en we krijgen te h enen en de lijst.
Het is niet alleen beperkt tot tags die we zien in het lichaam.
Ik kon ook nog zoiets als dit te doen.
Krijg elementen op tag naam lichaam en het gaat om een ​​lijst terug te keren naar me met één element het lichaam erin.
Of ik zou het ook doen voor het hoofd of de tijd element of titel of wat ik wil, maar het belangrijkste is dat het een lijst zelfs als er slechts één element het nog steeds een lijst terug keert.
Dus om het lichaam konden we iets als var lichaam ECO document dat elementen op tag naam lichaam te krijgen en dan neem het eerste punt, want er is slechts een item in die lijst te doen selecteren.
En als we kijken naar wat lichaam is krijgen we dit gigantische object die het hele lichaam.
OK.
Dus dat is Krijg elementen op tag naam.
Gewoon om te herhalen u het een tag naam als Ally.
Het spreekt en vindt alle elementen die overeenkomen met het en keert ze allemaal om u in een lijst.
Zelfs als er maar één.
Dus hier heb ik een ander voorbeeld doet het met een H-1.
Je kunt zien dat het kiest de twee H keer.
Ok dus nu veranderen we versnellingen een beetje.
We hebben niet langer een get element of om elementen door iets syntax.
Dit heet queery selector en query-selector is een nieuwere methode die niet lang heeft bestaan ​​voor alles wat.
Dat maakt echt ons leven een stuk eenvoudiger.
Dus eigenlijk kunnen we het gebruiken om alles wat we zagen met get element door id krijgen elementen per klasse naam krijgen elementen met tag naam die we kunnen dat allemaal met vragen selector repliceren doen.
Dus wat het doet is het duurt een CSSA stijl selector.
Dus een CSSA stijl selector betekent gewoon een van de kiezers die we zouden gebruiken in plaats van een CSSA document.
Dus in dit voorbeeld ben ik iets te selecteren op basis off van de ID hoogtepunt dus ik kan niet gewoon schrijven het woord hoogtepunt zoals ik deed met get element van ID, maar ik moet doen is gebruik maken van de CSSA syntax met de hash symbool of de Octa Thorpe en vervolgens te markeren.
Dus dit is hoe je iets met vraag selecteert.
Als u een ID wilt net zoals je zou doen met C Ss en we krijgen deze eerste bondgenoot met ID gelijk is aan markeren.
Voordat ik naar de console te gaan en typ dit uit ik zal je laten zien kunnen we hetzelfde doen met een klasse naam var tag gelijk document dat queery selector dot gevouwen dat is hoe we de vetgedrukte klasse zou selecteren met behulp van C Ss.
En wat belangrijk is dat het eigenlijk alleen geeft ons de eerste wedstrijd.
Dus ook al zijn er twee elementen die vet als klasse het geeft ons alleen de eerste en dat is het punt van de selector.
Het altijd maar keert één element is er een andere methode die we zullen zien binnenkort dat alle elementen die overeenkomen zal terugkeren.
Dus een query selector kunnen ook in een tag naam zoals we hier hebben.
H-1 en geeft deze de eerste H-1.
Dus we kunnen CSSA selectors dat we schrijven de hele tijd en zie SS te nemen en kunnen we die syntax gebruiken om elementen met vragen selecteert.
Dus ik zal hier laten zien dat.
Laat me duidelijk dat dit naar buiten en laten we selecteer deze eerste.
H-1.
Dus alles wat ik moet doen.
Var H-1 gelijk document vraag selector H-1.
En als we kijken naar wat H1 is nogmaals, het is een leuke string representatie, maar het is eigenlijk een object dat dit hele element vertegenwoordigt.
Dus de volgende up laten we proberen te selecteren op basis off van een ID.
Dus ik ga gewoon deze lijn in plaats van te kopiëren dan de H-1.
Dit zal een bondgenoot te zijn en in plaats van de eerste H-1 te selecteren zal het eerste item dat de ID hoogtepunt heeft te selecteren.
En natuurlijk is er slechts één punt, want het is een ID natuurlijk is het enige punt dat dit idee op een pagina heeft en we moeten dit.
Octa Thorgeir.
Anders gaat op zoek naar een tag naam genoemd hoogtepunt die niet bestaat en H. J. hem uit.
En als ik druk op enter en kijk naar Alhaj krijg ik die eerste bondgenoot met item in de lijst één ID gelijk hoogtepunt.
Tot slot laten we hetzelfde doen met een klas.
Dus gebruik ik de CSSA Leichter dot gevouwen dat is hoe we een klasse te selecteren en als we kijken naar Ally krijg ik de tweede bondgenoot met klasse gelijk opsommingstekens punt 2.
Dus er zijn andere dingen die we kunnen selecteren.
Het is niet alleen gebaseerd off van een tag naam of een identiteitskaart of een klasse.
Dat zijn de meest voorkomende, maar we kunnen ook andere dingen als deze, die niet zal werken op mijn pagina, maar ik kon de hele ankertags binnenkant van een bondgenoot met een soort van speciale selecteren doen.
En dit is een langere C Ss selector, maar het is geldig in de Verenigde Staten.
Dus al het anker tags klasse speciale die zijn genest binnen van een bondgenoot en dat is volkomen geldig is.
Nogmaals, ik heb geen deze set-up op mijn pagina.
Dus als ik druk op Enter gewoon om me geven.
Nee, want het leverde geen matches te vinden.
Dus zoals ik al zei Querrey selector geeft de eerste wedstrijd en dat is het.
Soms is het bijvoorbeeld handig als je wilde om het lichaam te selecteren.
Alles wat ik moet doen is zeggen vraag selector lichaam en dat geeft je het lichaam in tegenstelling tot toen ik dat deed document bedijkt krijgen elementen op tag naam lichaam.
Ze gaf me een lijst en dan moesten ze vragen om het eerste element.
Als ik vragen selector zal ik gewoon het lichaam meteen.
Maar het alternatief is queery selector allemaal.
Dus het werkt op precies dezelfde manier.
Het duurt een C een set selector, maar het geeft alle overeenkomende elementen.
Dus in dit geval ben ik met behulp document die vraag selector alle H-1 rendementen zowel h keer of in dit geval ben ik met behulp van de klasse vet.
Dus CSSA stijl.
Ik moet dot vet en dat geeft me beide elementen met de klas gelijk vetgedrukt.
Dus laten we aan te tonen dat in de con ..
Laten we alles selecteren bondgenoten dusver.
Bondgenoten gelijk documenteren die vraag selector.
Alle bondgenoot.
En dat zal ik ze allemaal geven.
Ik kijk naar bondgenoten.
U kunt zien dat het heeft drie bondgenoten.
Een laatste keer dat ik weet dat ik een record gebroken.
Deze objecten.
Ze zijn niet HMO.
Ze zijn JavaScript-objecten die zijn opgebouwd uit de HMO.
En als ik hetzelfde doen, maar ik doe het in plaats daarvan met de vraag selector en ik druk op enter.
Als ik kijk naar bondgenoten het is niet een lijst is het enige.
Dus hetzelfde als ik deed het voor een klasse.
Dus laten we het doen voor de vetgedrukte klasse.
We noemen het vet en heb je te documenteren die vraag selector dot vet.
En ik kijk naar dat het ook gewoon het eerste item item in de lijst.
En als ik dat doe vraag selector al dan krijg ik een lijst met beiden in.
Een punt van verwarring vaak voor mijn studenten is dat u nog vragen selector kunnen gebruik maken van alle, zelfs als er slechts één element dat u zoekt.
Dus je zou kunnen iets doen, zoals var bondgenoot gelijk document dot-query selector.
Alle van een ID als hoogtepunt en ik kijk naar Ally en het is een lijst met één punt.
Het is gewoon vrij zeldzaam dat je dat zou doen, maar het zal nog steeds werken als er slechts één wedstrijd.
Oké dus we bedekt veel terrein in deze video.
Dus laten we teruggaan naar het begin en doe een echt snelle wrap up.
We begonnen door te praten over hoe al deze methoden zijn binnenzijde van het document object dat we kunnen selecteren door ID met get element door ID we kunnen selecteren per klasse naam krijgen met elementen per klasse naam en een lijst die niet is eigenlijk een terug matrix.
Het is een knooppunt lijst genoemd.
We kunnen het zelfde ding, maar met behulp van GET elementen op tag naam, die ook een knooppunt lijst gebaseerd off van een element type dat we kiezen door dan hebben we vraag selector dat is een manusje van alles zal terugkeren doen.
Het geeft het eerste element dat overeenkomt met een bepaalde CSSA selector.
Dus we kunnen het gebruiken om alles wat element krijgen door het id klasse naam en tag naam doen hebben we het kunnen geven van een ID, zoals wij hier doen in een klasse zoals wij hier doen of een naam element.
En dan is er vraag selector allemaal die op dezelfde manier werkt behalve dat het een lijst die niet is een array.
Het is ook een knooppunt barsten met alle elementen die overeenkomen met een bepaalde selector.
Okee.