Quindi ora abbiamo discusso perché dovresti preoccuparti della Domm perché è eccitante.
E abbiamo anche parlato di cosa significhi il modello a oggetti del documento.
Il fatto che sia solo un modello di ogni elemento di una pagina che utilizza oggetti javascript l'oggetto
di livello superiore è chiamato documento.
Quindi è grandioso, ma non abbiamo ancora visto come farlo.
Quindi in questo video introdurrò brevemente il processo di manipolazione delle cose usando il cane.
Quindi ho ridotto l'intero processo a due parole chiave selezionate e manipolate.
applichiamo stili come il colore di sfondo viola bordo un pixel nero solido con javascript e Dom e popolazione.
Quindi, proprio come si vede valutare dove scriviamo un selettore per selezionare qualcosa con la classe di speciali o tutti
quelli h o tutti i tag immagine selezioniamo gli elementi e poi
Selezioniamo anche gli elementi anche se lo facciamo in un modo molto diverso.
Scriviamo il codice javascript che va e seleziona gli elementi e li restituisce a noi e quindi
cambiamo proprietà su di essi in modo da selezionare qualcosa e quindi manipolarlo.
Quindi nelle prossime diapositive ti mostrerò come può selezionare questa intestazione H-1
e come possiamo cambiarla in rosa.
ultimi video, ma non voglio che tu ti concentri sulla sintassi tanto quanto i concetti.
L'ho detto molto negli
I prossimi video entreranno nel nocciolo della selezione e della manipolazione.
Questa è solo una panoramica di come funziona.
Quindi su questa diapositiva mostrerò come puoi selezionare quell'H1 come con C.
Esistono molti modi diversi per selezionare un determinato elemento.
In questo caso questa riga di selezione del puntatore di codici a punti del documento di codice H-1 selezionerà l'H-1 in
questa pagina.
Quindi ho evidenziato qui con questa casella verde in modo da poter vedere cosa viene selezionato.
Quindi, ancora una volta var H-1 questa è una qualsiasi variabile che vogliamo equivale a quel parametro di selezione 8: 1.
Quindi passeremo molto più tempo con il selettore delle query e definiremo di cosa si tratta e come funziona.
Ma restituisce un oggetto che rappresenta questo H1 e lo salva nella variabile H-1.
Quindi questo è il processo di selezione.
La prossima parte è manipolare così da manipolarlo posso fare ogni sorta di cose e tutto quello che ho intenzione
di fare qui è cambiare il colore in rosa.
Quindi scriviamo semplicemente H-1, che è la nostra variabile che ha l'oggetto che rappresenta lo stile del punto H-1.
proprietà e quella proprietà di stile è un oggetto enorme con un mucchio di altre proprietà e il colore è uno di questi.
Questa è una
Quindi H-1 fa stile ma il colore è uguale al rosa.
E poi questo è tutto quello che dobbiamo fare.
E il browser vede che cambio la proprietà in rosa e aggiorna automaticamente ciò
che viene visualizzato rendendolo rosa.
Quindi abbiamo selezionato qui e poi abbiamo manipolato.
Quindi ho un altro esempio qui.
È un po 'più complicato.
Stiamo facendo un'animazione molto semplice in cui ogni secondo cambiamo il colore di sfondo del corpo
tra il blu e il bianco.
Quindi, quello che dobbiamo fare prima è selezionare il corpo e quindi manipolarlo in modo da selezionarlo.
Ho un'altra linea che utilizza il selettore di query di dump del documento che torneremo
ancora nel prossimo documento video che interrogano il corpo del selettore.
Quindi questo mi dà l'elemento del corpo dove effettivamente mi dà la rappresentazione dell'oggetto
il modello di esso che salvi nella variabile del corpo.
userò perché ho bisogno di sapere se vado dal blu al bianco o al bianco al blu.
Poi ho questa variabile blu che è solo un booleano che
Quindi inizia come falso e quindi sto usando l'intervallo impostato che abbiamo coperto alcuni anni fa.
Se non ricordi come funziona, fondamentalmente richiede due argomenti.
Il primo è un codice per eseguire una funzione e il secondo è un numero o un tempo in millisecondi.
Quindi ci vuole questo numero di millisecondi che è di mille o un secondo e ogni secondo
che chiamerà questo codice.
Quindi, cosa fa questo codice, controlla se lo sfondo è attualmente blu se lo è.
Quindi lo cambiamo in bianco se lo sfondo è bianco, quindi lo cambiamo in blu.
Quindi per dare un'occhiata più da vicino abbiamo il nostro se è blu.
Quindi è solo variabile.
Inizia come falso.
Quindi la prima volta che la pagina carica lo sfondo è bianco è blu è falso.
Quindi questa linea non funziona, ma questo corpo altro fa lo sfondo scuro uguale a questo colore esadecimale
che è blu.
In questo modo lo sfondo diventa blu.
Quindi, cambiamo semplicemente la nostra variabile blu da falso a vero.
E questo è un modo carino di farlo con il punto esclamativo o con l'operatore non.
Quindi, questo codice ricomincia la prossima volta è blu è già vero.
Quindi questo codice non esegue il corpo ma lo stile è uguale al bianco.
Quindi ora torniamo al bianco.
Questo non funziona e quindi cambiamo è blu di nuovo a falso.
E questo continua ad andare per sempre.
Quindi non vorrai mai qualcosa di così distratto come un colore di sfondo che cambia ogni secondo.
Ma questo dimostra che possiamo fare cose più complesse del semplice cambio di un H1 dal nero al rosa.
Quindi per racchiudere tutto questo due parole selezionare manipola noi selezioniamo Prendiamo alcuni oggetti che rappresentano gli elementi
e quindi facciamo qualcosa per loro.
Quindi il resto di questa unità sarà focalizzato su diversi modi di selezionare e
quindi diversi modi di manipolare.
Quindi il prossimo video approfondirà i diversi modi di selezionare gli elementi usando javascript.
Ne abbiamo già visto uno già selezionato.
Ci espanderemo su questo e ne impareremo altri