Trascrizione: (click per espandere)

salve a tutti in questo video andremo a
parlare un po più a fondo di come
manipolare il mio dom quindi il mio
documento oggetto con javascript allora
facendo un breve riassunto del
video precedente abbiamo detto che il
dom il mio documento oggetto ha dei
figli e ad esempio ha il figlio html che
in inglese si dice child che a sua volta
dei figli head e body che tra di loro sono
fratelli e quindi si dice in inglese
siblings e head rispetto ad esempio al tag
html è il figlio quindi quando si parla
del papa del tag head si dice parent
come vedete ho messo un html un po più
complesso qui perché vi farò vedere
alcuni esempi come andare a usare
interagire con gli elementi della pagina
attraverso il l'oggetto documento allora
l'oggetto documento alcune proprietà che
vanno a interagire direttamente con gli
elementi della pagina ad esempio la
proprietà anchors per interagire con le
ancore della pagina e quindi i tag "a"
poi la proprietà body per interagire con
il tag body forms se ci sono dei form
head per interagire con le tag head poi image per le immagini link
script e title vi faccio vedere a un
paio di esempi come funziona document
title ad esempio le adesso vado a
cambiare il titolo nuovo titolo della
pagina
al momento il mio titolo della pagina il
titolo di pagina eccolo qui qua sopra
se io adesso salvo il documento qui vado
a cambiare il titolo il nuovo titolo
posso andare a cambiare il tutto il
contenuto del tag body quindi posso
scrivere body inner html e nuovo contenuto
di eccolo qui
all'interno del mio tag body cio'
vedete tutta questa roba qui quindi
tutta questa roba qui nel momento in cui
io salverò questo file tutto il
contenuto del tag body verra'
sovrascritto da questo testo qui
salviamo eccolo qui come vedete un nuovo
contenuto body e all'interno del mio
body c'è solo la scritta adesso il
commento altrimenti non si vede più
niente
ad esempio posso andare a ritorna a fare
l'output del del mio tag head quindi
tutto quello che all'interno della head
della mia pagina
adesso andiamo a vedere console eccolo
qui quindi vedete il mio tag head con
all'interno tutti i suoi figli e in
questo caso il tag title
come vedete tutte queste proprietà non
lasciano l'utente o meglio il
programmatore interagire con tutti gli
elementi della pagina ad esempio qui ho
dei div un h1 dei paragrafi usando
queste proprietà non posso interagire
con questi e quindi per interagire con
gli altri elementi della pagina che non
al cui non si può arrivare usando le
proprietà del documento dell'oggetto
document devo usare dei metodi
dell'oggetto document vi faccio vedere
i più famosi allora per esempio c'è
cominciamo con questo salviamo tag
name allora sempre documento è che il
nome del mio oggetto è il nome del
metodo che è getelementsbythename
ed entro qui ci metto il nome del tag
ad esempio io voglio salvare dentro a
questa variabile tutti gli elementi div
della pagina in questo caso io ho due
elementi div1 e 2
se adesso io salvo e vado a fare l'out
put del del mio tag name qui
come vedete di javascript mi
ritorna una collection con due elementi
è come vedete assomiglia a una array
infatti ha dentro le parentesi quadre e si
dice che è una array-like perché
assomiglia a un array ma non è
propriamente un array comunque come gli array
io posso accedere agli elementi della
della collection usando l'indice tra le
parentesi quadrate e posso anche ad usare
la proprietà length come in questo
caso qui che mi ritorno a due
perché ho due elementi quindi vi dicevo
posso
accedere agli elementi della mia
collection usando gli indici come fosse
una array ad esempio qui vado a
selezionare uno quindi è il secondo div
e ci cambio per esempio la html nuovo
testo se adesso io salvo come vedete il
mio il mio secondo div ha nuovo testo
quindi ho inserito un nuovo testo
all'interno del mio secondo elemento
vi dicevo non è una array è una array-like
infatti se io faccio la output del se vi
ricordate per per controllare se o che
fare con una array uso a array.is(array) e
dentro ci metto tag name e in questo caso
mi ritornerà console ritornerà falso
perché non è una array e quindi quando io
ho a che fare con un array-like che quindi non
è una array posso accedere alle suoi
elementi usando e gli indici come fosse
una array posso usare la proprietà length
ma non posso usare i metodi dell'oggetto
array come for each map filter se io
voglio usare questi metodi devo
trasformare il mio array-like in un vero
array come faccio ci sono c'è un nuovo
metodo introdotto dall'ecma script 6
che si chiama from andiamo a vedere
allora io salvo array.from e dentro
ci metto tag name se adesso io vado a
rifare la output per controllare se
adesso a che fare con una array
adesso mi dice che è vero io ho
trasformato il mio array-like in un
vero array usando il metodo from
dell'ecma script 6
e adesso posso usare tutte i metodi
dell'oggetto array come foreach reduce
filter eccetera altro altro metodo del
oggetto documento molto usato è class
allora sempre document.getelementsbyclassname
dentro ci metto il nome testo 1 allora
adesso questo questo metodo qui mi
ritornerà una collection come era quello
di prima e con tutti gli elementi che
hanno l'attributo classe uguale a
test 1 quindi sì adesso io non s'ha da
fare l'out put console.log class mi
troverò una collezione con tre elementi
due div e un paragrafo anzi facciamo
così si vede meglio dire di sé parar
forse vado a vedere la minime html ho un
div con la classe test 1 un altro div
con la classe test 1
e poi c'è un paragrafo con la class test
1 quindi ho tre elementi con quella
classe
siccome la keyword class è una keyword
riservata in javascript perché se vi
ricordate quando ho parlato degli
oggetti si può creare un oggetto
costruttore usando la keyword class
quando vado a riferirmi all'attributo
classe quindi all'attributo html classe
usando javascript non posso scrivere
class devo scrivere classname è quello
che come in questo caso classname e
anche in questo caso ho una collection
quindi una array laiche e se voglio usare
di metodi degli array come prima devo
trasformarli in array
ultimo metodo super usato per interagire
con gli elementi della pagina e quello
che avete visto usare in tutte il
videocorso video precedenti che e getelementbyid in quel caso javascript
l'oggetto document ritorna un solo un
solo oggetto quindi un solo elemento
della pagina non una collection come nei
due metodi precedenti eccolo qui vi
faccio vedere allora
getelement ok sempre
document.getelementbyid i dati di come
siamo soliti usiamo display
eccolo qui adesso io il mio tutto questo
oggetto qui è salvato dentro una variabile
element cosa posso fare
posso fare molte cose posso andare a
cambiare il suo testo come avete visto
fare molte altre volte inner html nuovo
testo eccolo qui nuovo testo ho cambiato
il testo del mio paragrafo cos'altro
posso fare
posso andare a cambiare il suo stile
andiamo a vedere element si usa la proprietà style per
andare a cambiare il suo stile e poi si
si scrive il il nome della proprietà
come se fosse un css ad esempio
posso scrivere background e gli assegnò
un colore rosso eccolo qui rosso quindi
proprietà style e la proprietà come se
fosse una regola sia css
background rosso se io ho la mia
proprietà è composta da due parole come
in questo caso potrebbe essere
background color non posso usare il
trattino per separare le due parole
quindi gli usa il camelcase sarebbe color
in questo come in questo caso e come
vedete rimane rosso
cos'altro posso fare posso aggiungerci
un attributo all'elemento element e per
aggiungere un attributo si usa il metodo
setattribute che accetta
due argomenti il primo argomento è il
nome dell'attributo ad esempio possono
mettere attributo directions qui dir
e il secondo argomento è il valore da
inserire dentro a questo attributo
quindi per esempio posso scrivere right
left se adesso io salvo come vedete il
testo mi è stato spostato e se vado a
vedere l'elemento entro il mio body
dentro il mio tag ho aggiunto
l'attributo dir eccolo qui con valore
rtl e qui non c'era quindi io usando javascript
ho aggiunto un attributo cos'altro posso
fare
posso andare a posso andare a cambiare
commentiamo questo e vi faccio vedere
posso andare a cambiare element
attributi
anzi element class name come vi dicevo
non posso usare la parola class quindi
devo scrivere class name e ci
scrivo una nuova proprietà anzi questo
posso anche lasciarlo non cambia niente
quindi adesso io alla mia proprietà
class
anzi al mio attributo class questo
attributo qui aggiungo un nuovo
anzi passo questo valore
quindi io quando vado a salvare avrò un
nuovo attributo come vedete nella mia
proprietà class il valore del mio
attributo class il suo valore è stato
cambiato da test 1 a red usando
javascript
vi faccio vedere altri esempi di style
giusto per dare un esempio posso
cambiare il colore del
del tasto quindi possono per esempio
mettere yellow
eccolo qui e posso cambiare anche la sua
font size
vi ricordo che se ho due parole devo
scrivere in camelcase e posso
scrivere 200 per cento
eccolo qui con questo è tutto vi ho dato
una panoramica di come interagire con i
vari elementi della pagina vi metterò
anche una descrizione con più metodi e
attributi del documento oggetto
dell'oggetto documento scusate è fatto
anche vedere come cambiare i testi come
cambiare gli attributi come cambiare le
classi e come cambiare lo stile con
questo è tutto ci sentiamo la prossima
ciao