Trascrizione: (click per espandere)

salve a tutti in questo video vi parlerò
di come creare nuovi elementi per il
vostro dom e come navigare tra di essi
allora tecnicamente si dice che ogni
elemento del dom è un nodo del dom
quindi andiamo a creare un nuovo figlio
lo chiamo qui voglio inserire un
paragrafo "p" dentro il mio padre al mio
al mio div quindi
document.getelementbyid i display poi
figlio inner html testo del paragrafo
figlio e qui chiudo
ok come vedete io ho inserito
direttamente testo in formato html
dentro al mio div
e se andiamo a vedere l'output qui come
vedete un elemento p quindi un nodo p
dentro al nodo div adesso vi faccio
vedere un'altra tecnica per per inserire
un nuovo nodo allora let la chiamo "p"
document.createElement e voglio creare un
elemento di tipo p quindi un elemento
paragrafo se avesse voluto creare un
elemento div avrei scritto div
adesso io voglio inserire del testo
all'interno di questo p quindi lo chiamo
testo document.createTextNode e dentro lo
scrivo testo nel paragrafo p ecco qui
adesso io voglio andare a io qui ho
creato un elemento e qui ho creato il
testo e adesso voglio congiungere il
testo dentro all'elemento p quindi p appendChild quindi attacca attacca il figlio
testo abbiamo output
adesso io devo andare ad attaccare il
mio elemento p dentro al mio div
come faccio allora
document.getelementbyid i sempre display
appendChild e come vedete io il mio
nuovo elemento p dentro il mio div
eccolo qui posso attaccare inserirne
quanti ne voglio quindi posso creare un
nuovo p1 e metto p1 per far vedere che
diverso testo 1 rimetto p1 metto testo
uno che ti ho detto p1
ecco qui un altro elemento p voi potete
pensare ma perché io devo consumare
quattro righe di codice quando posso
fare lo stesso usando una sola riga per
un discorso di performance e voi dovete
inserire due tre elementi potete usare
questa tecnica qui se voi dovete
inserire decine o centinaia di elementi
dovete usare questa tecnica qui e adesso
vi faccio vedere se se io voglio
ritornare tutti gli elementi p
del mio dom
allora facciamo nodelist document.querySelectorAll elementi "p"
adesso vado a fare la output scritto
sbagliato console.log di nodelist andiamo
a vedere l'output
eccolo qui mi viene ritornato nodeList
di tre elementi che assomigliano array
quindi ogni tre elementi accessibili
attraverso il loro indice e la proprietà
length anche la nodelist come la
collection che abbiamo visto nel video
precedente è una array-like quindi non è
propriamente una array però lo posso
trasformare come una
come una array usando array.from un
nodelist è una collection sono molto
simili tra di esse quindi tutti e due
hanno gli elementi accessibili
attraverso il loro indice e la proprietà
length
adesso vi faccio vedere come navigare
tra gli elementi del dom
allora sì io voglio andare a lavorare
con il mio primo paragrafo qui questo
poi questo paragrafo come gli altri tre
come gli altri due non ha nessun segno
identificativo perché non ha un id non
ha una classe eccetera
quindi non posso usare getelementbyid o
getelementsbytagname come
faccio andare a lavorare con questo devo
navigare attraverso gli elementi del dom
fino a questo punto quindi io parto dal
mio primo elemento chiamamo child
parto dal mio primo elemento che è
facile da identificare quindi
getelementbyid display e poi quindi io parto
dal mio div e scrivo e usando la
proprietà firstChild vado a
identificare il mio primo paragrafo
quindi e se adesso faccio all'output console.log child l'output ecco questo è il mio
primo paragrafo quindi viene ritornato
tutto il primo figlio e io potrei
anche usare la proprietà nodeName per
esempio per sapere che tipo di figlio di
nodo sto con cui sto lavorando e lui mi
dice che è un nodo di tipo "p" quindi un
paragrafo e posso anche andare a vedere
il valore al suo interno
abbiamo detto che il testo inserito
dentro un paragrafo è a suo tempo un
nodo e quindi è figlio del paragrafo
quindi io devo ancora scrivere firstChild
quindi il primo figlio del paragrafo e e
posso scrivere nodeValue
e come vedete mi ritorna il testo del
mio paragrafo se volesse andare a
lavorare per esempio con l'ultimo
paragrafo cosa devo fare
facciamo una cosa simile e lastChild lo
chiamo invece di lavorare con la
proprietà firstChild lavoro con la
proprietà lastChild e se adesso vado a
fare l'output del suo del testo
dell'ultimo paragrafo qua metto lastChild
mi dice testo del paragrafo p1 quindi
eccolo qui quindi se
l'elemento non ha nessun segno
identificativo per lavorare con esso
devo arrivare ad esso
navigando tutti gli altri elementi del
dom
con questo è tutto ci sentiamo la
prossima ciao