O pagina HTML cu multe elemente DOM

Metodele si proprietatile exemplificate

Important! Aceste liste nu sunt exhaustive. Cuprind doar metodele si proprietatile mai importante.

Selectarea elementelor DOM singulare

Metodele si proprietatile din aceasta lista serversc la selectarea unui singur element DOM

• getELementById(id)
• body
• head
• firstChild
• firstElementChild
• lastChild
• lastElementChild
• parentNode
• parentElement
• nextSibling
• nextElementSibling

Atentie, diferenta dintre firstChild Si firstElementChild este ca primul poate fi orice fel de nod (chiar si textNode) pe cand al doilea este primul fiu-element. Acest lucru se intampla si in cazul lastChild, lastElementChild, respectiv nextSibling si nextElementSibling. Deci nu le confundati.

Exemplele

Aici sunt cerintele rezolvate in JS de acest fisier-exemplu.

1. La incarcarea paginii, primul element al listei cu id-ul "cerinte" sa aiba literele de culoare mov. (document.getElementById(id), firstElementChild)
2. In cadrul acestui element din lista (care are id-ul "output_1") se va afisa intr-un element de tip div cu clasa "output", pentru paragraful din footer, primul fiu, respectiv primul fiu-element. De asemenea se va afisa ultimul fiu, respectiv ultimul fiu-element.
3. In cadrul acestui element din lista (care are id-ul "output_2") se va afisa intr-un element de tip div cu clasa "output", numarul total de elemente <li> din pagina , respectiv numarul de elemente <li> din lista din pagina cu id-ul "cerinte" (adica aceasta lista).
4. Avand in vedere ca exista un singur element h1, sa se selecteze acesta, si sa se evidentieze asupra lui diferenta dintre children si childNodes.
5. Daca se apasa (press) tasta "p", toate paragrafele capata un background albastru deschis si la click pe ele se va da un alert cu tagul elementului parinte al paragrafului respectiv. Cand se apasa tasta p din nou, acestea isi vor pierde borderul dar si triggerul de la onclick.
6. La apasarea tastei "e" (fara a lua degetul de pe tasta) toate elementele din pagina vor capata un border si un padding si vor fi afisate cu display inline-block. Cand se ia degetul de pe tasta "e", elementele revin la formatul initial. (document.querySelectorAll(selector))

Mod de invatare

Aceasta sectiune va ajuta sa urmariti exemplificarea metodelor si proprietatilor prezentate mai sus. Cautati lista cu cerinte din documentul html.

Urmariti in paralel:

1. fisierul HTML (codul) - pentru a observa elementele din pagina
2. fisierul JS - pentru a vedea aplicarea metodelor si proprietatilor
3. fisierul HTML (in browser) - pentru a observa output-ul