Ben tornato.
In questo video passeremo il tempo a parlare dei diversi modi di selezionare gli elementi
usando javascript e la bambola.
Prima di parlare dei selettori effettivi, dobbiamo rivedere il documento ancora una volta.
Ricorda che il nostro intero dormitorio tutti gli oggetti tutte le rappresentazioni dei nostri elementi vivono tutti
all'interno di questo oggetto documento.
È l'oggetto di livello superiore o il nodo radice.
Così rapidamente apriamo qualsiasi finestra del browser.
Userò Google e proviamo a digitare queste quattro righe.
Quindi apri la console e digita il punto del documento che stai e ci mostra l'URL della pagina su cui
ci troviamo.
Puoi fare collegamenti punto documento e questo è un intero elenco di ogni singolo link sulla pagina.
Ogni singolo tag di ancoraggio che possiamo fare documenta che Vadi e questo è l'intero corpo con ogni altro elemento all'interno
di esso che vive nel corpo e che possiamo fare testina del documento.
Quindi l'abbiamo già visto negli ultimi video.
che tutti i selettori di tutti i metodi che impareremo vivono anche all'interno del documento.
La ragione per cui te la sto mostrando di nuovo è
Quindi tutto ciò che apprendiamo in questo video inizierà con qualcosa di documento.
Quindi ti mostrerò cosa sono quei qualcosa.
Ci sono cinque metodi principali di cui parleremo in questo video.
Sono tutti integrati nel documento.
Iniziano tutti con il punto del documento.
Puoi vederli qui ottenere elemento per id ottenere elementi per nome classe ottenere elementi per nome tag selettore di selezione e
selettore di query.
Tutto ciò se riesci a ripensare al video che ho fatto aggiungendo metodi a un oggetto in cui
potremmo fondamentalmente memorizzare una funzione come valore anziché come oggetto.
Avevamo uno spazio per gatti nello spazio per cani e abbiamo dovuto parlare del metodo che abbiamo aggiunto al nostro oggetto spazio cane.
Questo è esattamente ciò che sta accadendo qui.
Questi cinque metodi sono stati tutti aggiunti all'oggetto del documento.
Quindi, prima di iniziare davvero, voglio mostrarti la posta H-G che userò
a scopo dimostrativo.
È una pagina molto semplice, ha solo alcuni elementi.
Quindi la nostra testa normale è praticamente vuota a parte un titolo o un corpo.
E poi dentro il corpo per H-1 è quello che dice ciao.
Un altro che dice addio.
E poi tre alleati invece di un UL e quei tre alleati elencano l'articolo uno due e tre sono
leggermente diversi.
Il primo ha un evidenziatore ID e l'ultimo ad avere una classe chiamata in grassetto.
Quindi lo useremo.
Il fatto che alcuni di loro siano H-1 alcuni degli elementi sono alleati.
Alcuni hanno classi.
Uno ha un ID.
Useremo queste diverse proprietà per selezionarle in modi diversi e combinazioni diverse.
Quindi sto usando lo stesso codice qui negli esempi e sto disegnando una casella verde in modo che tu possa vedere
nelle prossime diapositive.
Una casella verde attorno a qualsiasi cosa selezionata.
OK, iniziamo con il primo metodo.
Ottieni elemento per ID.
Quindi il suo nome è un po 'auto-esplicativo.
Riceve un nome ID e restituirà l'elemento corrispondente a quell'ID.
Ricorda che un ID può verificarsi solo una volta su una pagina.
Quindi, ecco un documento di esempio ottenuto get elemento per ID.
Evidenzia seleziona questo alleato che ha l'evidenziazione Id, quindi seleziona l'oggetto e poi torna
a noi.
Lo mostrerò rapidamente nel consiglio.
di documento ottieni elemento per evidenziazione ID che è il nostro nome ID.
Quindi apriremo la console a un tipo
Salviamolo in una variabile chiamata tag.
Hit enter.
E guardiamo il TAG.
E puoi vedere che ci dà la prima riga che ha ID uguale a evidenziare.
Quindi abbiamo selezionato qualcosa tramite un ID.
Di nuovo lo sta mostrando a noi come se fosse effettivamente invecchiato bene, ma il risultato di questo è
in realtà un oggetto javascript.
Quindi possiamo farlo cancellato di nuovo da Diyar sul tag.
E questo è in realtà ciò che sembra.
Tutte queste proprietà.
Quindi questa è solo una bella scorciatoia per noi per vedere visivamente ciò che abbiamo selezionato, ma in realtà è una
rappresentazione di oggetti.
Va bene, ecco tutto quello che c'è da ottenere per ID.
Chiamiamo il metodo con cui passiamo in un argomento a stringa singola il nome di un ID che
vogliamo e poi va e trova l'elemento corrispondente che ha lo stesso ID e restituisce la rappresentazione dell'oggetto a noi.
Il prossimo è ottenere elementi per nome della classe, quindi il suo nome ti dice esattamente cosa fa.
Proprio come ottenere elemento per ID.
Anche se questo è leggermente diverso Ottieni elementi plurali con un S per nome della classe.
Ricorda che una classe può verificarsi tutte le volte che vogliamo su una pagina.
Quindi passiamo una stringa come in grassetto e restituiremo un elenco di tutti gli elementi della pagina con
il nome della classe corrispondente in grassetto.
In questo caso ce ne sono due, ma se nella pagina c'erano diecimila elementi con quella classe avremmo
ottenuto tutti i 10000 in una lista.
Quindi andiamo a dimostrarlo, quindi valuteremo il documento come elemento per nome della classe e potrai vedere se otteniamo questo piccolo completamento automatico
in modo da poter selezionare quello che vogliamo ottenere per nome della classe e quindi il nome
della classe che vogliamo è in grassetto.
Salviamolo in una variabile.
I tag non vengono taggati ma tag perché recupereremo più tag se osserviamo quali sono i tag.
È una lista di due bugie sia con classe uguale a in grassetto.
Tecnicamente non è un array.
È qualcosa chiamato lista di nodi che è simile ad array.
Mi piace pensarlo come un array leggero.
Quindi viene fornito con alcune delle cose che ci si aspetterebbe da un array.
Ma alcune delle funzionalità più avanzate sono effettivamente mancanti.
Quindi, per esempio, possiamo accedere a elementi come questo usando un indice 0.
Possiamo fare tag per outflank ma non possiamo fare un per ogni punto dei tag loop per ciascuno.
E se lo faccio, mi dirà che i tag sono per ciascuno.
Non è una funzione.
esiste un foreach definito per questi elenchi di nodi definito per gli array e questi non sono matrici.
Questo perché non
E proprio come con get Elemento di ID ci mostra questa bella rappresentazione di stringa, ma dietro le quinte
è in realtà un oggetto.
Quindi, ancora una volta solo per dimostrare che per te console punto DIR e facciamo zero tag.
Ed è in realtà questo grande oggetto pazzo con tonnellate di proprietà.
OK, quindi prendiamo gli elementi per nome della classe.
Restituisce una lista.
Non proprio un array.
E contiene ogni elemento della pagina che corrisponde al nome della classe data che abbiamo fornito.
Avanti abbiamo ottenuto elementi dal nome con tag.
Quindi questo funziona proprio come ottenere elemento per ID o ottenere elementi per nome della classe.
Tranne che restituisce un elenco di elementi che corrispondono a un determinato nome di tag come Ally o H-1.
Quindi in questo caso sto eseguendo documenti che ottengono elementi dal nome del tag Alhaj che mi restituirà
un elenco dei tre alleati che esistono in questa pagina.
al documento che ottiene gli elementi in base al nome del tag e facciamo prima Alhaj e guardiamo i tag e otteniamo
che questa lista non sia un array piuttosto che un elenco di nodi che ha tre alleati e non lo dimostrerò a te questa volta
Quindi dimostriamo ancora che i tag var equivalgono
Sono andato al Console che DJR.
Ma questi sono oggetti che non sono solo archi o meno.
H tim l sono in realtà oggetti javascript con tutte quelle proprietà.
Quindi posso fare la stessa cosa per H-1.
Quindi selezioneremo tutti quelli che guardiamo ai tag e arriviamo a quelli e all'elenco.
Non è solo limitato ai tag che vediamo all'interno del corpo.
Potrei anche fare qualcosa di simile.
Ottieni elementi per nome del corpo del tag e restituirà a me un elenco con un elemento all'interno
del corpo.
Oppure potrei farlo anche per la testa o l'elemento temporale o il titolo o qualsiasi altra cosa voglio, ma la parte importante
è che restituisce una lista anche se c'è solo un elemento che restituisce ancora una lista.
Quindi per selezionare il corpo potremmo fare qualcosa come il documento var body ECOs che ottiene
elementi dal corpo del nome del tag e quindi prendi il primo oggetto perché c'è solo un elemento in quell'elenco.
E se guardiamo a quale corpo siamo, otteniamo questo oggetto gigante che è l'intero corpo.
OK.
Ecco che ottieni elementi per nome del tag.
Solo per ribadire gli dai un nome come Ally.
Va e trova tutti gli elementi che lo abbinano e li restituisce tutti in una lista.
Anche se ce n'è solo uno.
Quindi qui ho un altro esempio che lo fa con un H-1.
Puoi vedere che seleziona una volta sola le due H.
Ok, adesso cambiamo marcia un po '.
Non abbiamo più un elemento get o elementi con una sintassi.
Questo è chiamato selettore di query e il selettore di query è un metodo più nuovo che non è mai esistito da
così tanto tempo.
Questo rende le nostre vite molto più semplici.
Quindi, in realtà, possiamo usarlo per fare tutto ciò che abbiamo visto con get element da id ottenere elementi
per nome della classe ottenere elementi con nome tag, possiamo replicare tutto ciò con il selettore di query.
Quindi, quello che fa è prendere un selettore di stile CSSA.
Quindi un selettore di stile CSSA significa solo uno qualsiasi dei selettori che useremmo al posto di un documento CSSA.
devo fare è usare la sintassi CSSA con il simbolo dell'hash o l'Octa Thorpe e quindi evidenziare.
Quindi in questo esempio sto selezionando qualcosa in base all'evidenziazione dell'ID, quindi non posso semplicemente scrivere la parola evidenzia come ho
fatto con get element per ID ma
Ecco come si seleziona qualcosa con il selettore di query.
Se vuoi un ID proprio come faresti con C Ss e otteniamo questo primo alleato con ID uguale a evidenziare.
Prima di passare alla console e scriverlo, ti mostrerò che possiamo fare la stessa cosa
con un nome di classe. Var tag equivale a dire che il selettore di queery ha il punto piegato, ovvero come selezioneremmo la
classe in grassetto usando C Ss.
E ciò che è importante è che in realtà ci dà solo la prima partita.
Quindi, anche se ci sono due elementi che hanno messo in evidenza come classe ci dà solo il primo ed è
questo il punto di selezione.
Restituisce sempre solo un elemento, c'è un altro metodo che vedremo tra breve che restituirà tutti gli
elementi che corrispondono.
Quindi un selettore di query può anche contenere un nome di tag come quello che abbiamo qui.
H-1 e restituisce il primissimo H-1.
Quindi possiamo prendere i selettori CSSA che scriviamo tutto il tempo e vediamo SS e possiamo usare quella sintassi per selezionare gli
elementi con il selettore di query.
Quindi lo dimostrerò qui.
Consentitemi di chiarirlo e selezioniamo prima questo.
H-1.
Quindi tutto ciò che devo fare.
Var H-1 è uguale al selettore di interrogazione
del documento H-1.
E se guardiamo a ciò che H1 è di nuovo, è una bella rappresentazione di stringa, ma in realtà
è un oggetto che rappresenta l'intero elemento.
Quindi, dopo proviamo a selezionare in base a un ID.
Quindi ho intenzione di copiare questa riga piuttosto che H-1.
Questo sarà un alleato e piuttosto che selezionare il primo H-1 selezionerà il primo oggetto
che ha l'evidenziazione dell'ID.
E ovviamente c'è un solo articolo perché è un ID ovviamente è solo un articolo che ha questa idea su una
pagina e abbiamo bisogno di questo.
Octa Thorgeir.
Altrimenti cercherà un nome di tag chiamato evidenziazione che non esiste e H. J. lui fuori.
E se premo invio e guardo Alhaj, ottengo quel primo alleato con un elemento di elenco con un ID uguale a evidenziare.
Infine facciamo la stessa cosa con una classe.
Quindi uso il punto piegato Leichter CSSA che è il modo in cui selezioniamo una classe e, se guardiamo ad Ally,
ottengo il secondo alleato con la voce 2 della lista puntata uguale alla classe.
Quindi ci sono altre cose che possiamo selezionare.
Non si basa solo su un nome di tag o un ID o una classe.
Quelle sono le più comuni ma potremmo fare altre cose come questa che non funzioneranno sulla
mia pagina ma potrei selezionare tutti i tag di ancoraggio all'interno di un alleato con una classe speciale.
E questo è un selettore C S più lungo ma valido negli Stati Uniti.
Quindi tutti i tag di ancoraggio hanno speciali di classe che sono annidati all'interno di un alleato e questo è totalmente valido.
Ancora una volta non ho questo set sulla mia pagina.
Quindi, se premo Invio, mi sta solo andando a darmi.
No perché non ha trovato alcuna corrispondenza.
Quindi, come ho detto, Querrey selector restituisce la prima partita e basta.
A volte è utile ad esempio se si desidera selezionare il corpo.
del selettore di query e questo ti dà il corpo a differenza di quando ho fatto documenti recuperati da elementi del corpo del tag name.
Tutto quello che devo fare è dire il corpo
Mi hanno dato una lista e poi hanno dovuto chiedere il primo elemento.
Se utilizzo il selettore di query, otterrò subito il corpo.
Ma l'alternativa è tutto selettore.
Quindi funziona esattamente allo stesso modo.
Prende una C come un selettore, ma restituisce tutti gli elementi corrispondenti.
Quindi in questo caso sto usando il documento che il selettore di query H-1 restituisce entrambi h una volta o in questo caso sto usando
la classe in grassetto.
Quindi stile CSSA.
Ho bisogno di punti in grassetto e questo mi dà entrambi gli elementi con la classe in grassetto uguale.
Quindi dimostriamo che nel con. Selezioniamo tutti gli alleati finora.
Allies equivale a documentare quel selettore di query.
All alleato.
E questo mi darà tutti loro.
Guardo gli alleati.
Puoi vedere che ha tre alleati.
Un'ultima volta so che sono un disco rotto.
Questi sono oggetti.
Non sono HMO.
Sono oggetti javascript costruiti dall'HMO.
E se faccio la stessa cosa ma lo faccio invece con il selettore di query e premo invio.
Se guardo gli alleati non è una lista, è solo uno.
Quindi la stessa cosa se l'avessi fatto per una lezione.
Quindi facciamolo per la classe audace.
Lo chiameremo in grassetto e documenteremo il punto di selezione della query in grassetto.
E guardo che è solo la prima voce dell'elenco.
E se faccio interrogare il selettore, ottengo una lista
con entrambi lì dentro.
Un punto di confusione spesso per i miei studenti è che
puoi ancora usare il selettore di query tutto anche se c'è solo un elemento che stai cercando.
Quindi si potrebbe fare qualcosa come varial al pari del selettore di query sui documenti.
Tutti i documenti identificativi come highlight e guardo Ally ed è una lista con un oggetto.
È piuttosto raro che tu lo faccia, ma funzionerà comunque se c'è una sola partita.
Va bene quindi abbiamo coperto molto terreno in questo video.
Quindi torniamo all'inizio e facciamo un rapido riassunto.
Abbiamo iniziato parlando di come tutti questi metodi sono all'interno
dell'oggetto documento che possiamo selezionare per ID con get element per ID, possiamo selezionare per nome
della classe con get elementi per nome della classe e che restituisce un elenco che non è in realtà un array.
Si chiama una lista di nodi.
selettore di query che è un jack di tutti i mestieri.
Possiamo fare la stessa cosa ma usando GET elementi per nome tag che restituirà anche un elenco di nodi basato su un tipo di elemento che selezioniamo per poi abbiamo il
Restituisce il primo elemento che corrisponde a un dato selettore CSSA.
Quindi possiamo usarlo per fare tutto ciò che ottiene l'elemento in base al nome della classe
id e al nome del tag, potremmo dargli un ID come facciamo qui in una classe come facciamo qui o un nome di elemento.
E poi c'è il selettore di query che funziona allo stesso modo
tranne che restituisce un elenco che non è un array.
È anche un nodo scoppiato con tutti gli elementi che corrispondono ad un dato selettore.
Tutto ok.
Quindi la prossima volta ti farò fare un esercizio davvero veloce