Pe lângă editarea elementelor existente, interfața DOM vă permite să ștergeți sau să creați elemente noi pe pagină. Acest lucru deschide oportunități deosebite pentru crearea de pagini dinamice frumoase. Mai jos sunt metodele de lucru cu documentul în această direcție.
Ștergerea nodurilor
removeChild ()
Pentru a elimina nodurile, utilizați metoda removeChild ().
Din titlu puteți vedea că această metodă șterge nodul copil. Adică, removeChild () trebuie apelat pe elementul care este părintele nodului care este șters.
Metoda removeChild () returnează o referință la un obiect la distanță. Cu acest nod puteți lucra ulterior.
Pentru a nu căuta separat referințele la elementul care trebuie șters și la părintele său, puteți utiliza referința relativă la nodul părinte. Mai jos este un exemplu în care metoda de eliminare () pentru nodurile de elemente este creată. Se numește direct pe elementul care urmează să fie eliminat.
Crearea de noi noduri
Noi noduri de model DOM sunt create foarte simplu. Pentru aceasta, utilizați metodele încorporate ale obiectului documentului.
Clonarea nodurilor
O altă modalitate de a crea un nod este de a clona unul existent. Acest lucru este util când trebuie să creați un complex dar același tip de noduri.
cloneNode ()
CloneNode () este folosit pentru a clona noduri.
Element. cloneNode (Adâncime) Adâncime O valoare booleană care indică adâncimea de clonare. Dacă argumentul este adevărat. atunci va fi efectuată clonarea completă a acestui element - cu toate atributele și nodurile imbricate. Dacă specificați fals. atunci elementul este copiat fără noduri copii, dar cu toate atributele. Acest argument este opțional, însă este întotdeauna de dorit să îl specificați, deoarece diferite browsere pot utiliza valori implicite diferite.
Folosind cloneNode () pot rezulta elemente din document care au același id sau nume unic.
Dacă elementul sursă are un atribut id sau nume. înainte de a introduce în document, trebuie să modificați aceste atribute pentru elementul de clonare.
Adăugarea de noduri
Metodele care adaugă noduri noi la structura documentului trebuie să fie apelate pe elementul în care trebuie făcută inserția (adică va fi elementul parental al elementului inserat).
appendChild ()
Cea mai ușoară metodă pentru introducerea unui nou nod într-un document este appendChild (). Se inserează un nou nod la sfârșitul elementului părinte. Nodul introdus devine ultimul nod din lista nodurilor copil a elementului.
insertBefore ()
O altă metodă pentru adăugarea unui nod la un document este insertBefore ().
Această metodă este mai universală. Vă permite să inserați un element oriunde în celelalte elemente copil, nu doar la sfârșitul părintelui.
replaceChild ()
O altă modalitate de a adăuga un element la o pagină este utilizarea metodei replaceChild (). Se combină simultan două acțiuni: elimină un nod și inserează unul nou în locul său.
Metoda returnează o referință la nodul la distanță.
insertAdjacentHTML ()
Adăugarea unui nou nod în document poate fi o inserare simplă a codului HTML ca șir. Pentru aceasta, utilizați metoda insertAdjacentHTML ().
părinte. insertAdjacentHTML (punct de inserție, cod HTML) poziția de inserare Poziția în care urmează să fie introdus codul. Acest loc este indicat relativ la elementul însuși și poate avea una dintre următoarele valori:- înainte de a începe - chiar înainte de eticheta de deschidere.
- dupa inceput - imediat dupa eticheta de deschidere.
- înainte - chiar înainte de eticheta de închidere.
- după - imediat după eticheta de închidere.
Această metodă nu reîncărcă conținutul existent al elementului, deci funcționează mult mai repede decât utilizând proprietatea innerHTML.
Mutați nodurile
Metodele descrise mai sus, care adaugă noi noduri la structura documentului DOM, pot fi de asemenea folosite pentru a muta cele existente. Pentru a face acest lucru, specificați pur și simplu nodul pe care doriți să îl mutați ca argument. Elementul specificat va fi automat eliminat din locul său și inserat în cel nou.
Pentru a copia un element (și nu îl mutați), mai întâi trebuie să creați clona utilizând metoda cloneNode ().
Articole similare
Trimiteți-le prietenilor: