În această lecție vom învăța cum să creăm noduri element (createElement) și noduri text (createTextNode). De asemenea, vom examina metodele de adăugare a nodurilor în arbore (appendChild. InsertBefore) și pentru eliminarea nodurilor din arbore (removeChild).
Adăugarea nodurilor la un copac
Adăugarea unui nou nod la un copac se face de obicei în două etape:
- Creați nodul necesar utilizând una dintre următoarele metode:
- createElement () - creează un element (nod) cu numele specificat (etichetă). Metoda createElement (element) are un parametru obligatoriu (element) - acesta este un șir care conține numele elementului (eticheta) care este creat. Numele elementului (eticheta) din parametru trebuie să fie indicat cu majuscule. Ca rezultat, această metodă returnează elementul creat.
- createTextNode () - creează un nod de text cu textul specificat. Metoda createTextNode (text) are un parametru obligatoriu (text) - acesta este un șir care conține textul nodului de text. Ca rezultat, această metodă returnează nodul de text care a fost creat.
- Specificați locația din arborele în care doriți să inserați nodul. Pentru aceasta, utilizați una dintre următoarele metode:
- appendChild () - adaugă nodul ca ultimul copil al elementului pentru care se invocă această metodă. Metoda appendChild (nod) are un parametru obligatoriu: nodul pe care doriți să-l adăugați. Ca rezultat, această metodă returnează nodul adăugat.
- insertBefore () - inserează nodul ca nodul copil al elementului pentru care se invocă această metodă. Metoda insertBefore (newNode, existingNode) are doi parametri: newNode (necesar) - nodul pe care doriți să îl adăugați, existândNode (opțional) este nodul copil al elementului înaintea căruia trebuie să introduceți nodul. Dacă al doilea parametru (existingNode) nu specifică, atunci această metodă îl va introduce în final, adică ca ultimul nod copil al elementului pentru care se invocă această metodă. Ca rezultat, metoda insertBefore () returnează nodul inserat.
Pentru a face acest lucru, trebuie să faceți următoarele:
Metodele appendChild () și insertBefore () când se lucrează cu nodurile existente
Lucrul cu nodurile existente folosind metodele appendChild () și insertBefore () este de asemenea realizat în două etape:
- Obțineți nodul existent în arbore.
- Specificați locația unde doriți să inserați un nod folosind metoda appendChild () sau insertBefore (). În acest caz, nodul va fi eliminat din locația anterioară.
De exemplu, adăugați un element li existent. conținând textul "Tablet" în partea de sus a listei (în acest caz va fi eliminat din locul anterior):
Ștergerea nodurilor
Îndepărtarea unui nod dintr-un copac se realizează în două etape:
- Obțineți (găsiți) acest nod din arbore. Această acțiune este efectuată de obicei prin una din următoarele metode: getElementById (). getElementsByClassName (). getElementsByTagName (). getElementsByName (). querySelector () sau querySelectorAll ().
- Apelați metoda removeChild () din nodul părinte. care ca parametru trebuie transmis nodului pe care dorim să îl ștergem.
Metoda removeChild () returnează un nod la distanță sau valoarea nulă ca valoare. dacă nodul pe care am vrut să îl eliminăm nu există.
De exemplu, eliminați ultimul element copil dintr-un element care are id = "myID".
De exemplu, eliminați toți copiii dintr-un element care are id = "myQuestion":
Articole similare
Trimiteți-le prietenilor: