JavaScript este un limbaj de scripting puternic care oferă programatorilor posibilitatea de a crea site-uri web dinamice, interactive. Găsirea elementului părinte al unui anumit element este o operație frecventă atunci când lucrați cu Document Object Model (DOM).
Aici, ne vom uita la o varietate de abordări bazate pe JavaScript pentru a realiza acest lucru.
bara de adrese cromată
Elementul părinte al unui element HTML poate fi găsit utilizând atributul parentNode, care este cea mai ușoară metodă. Când este furnizat un element, acest atribut returnează nodul părinte al elementului în arborele DOM. Utilizarea acestui atribut este ilustrată de următorul exemplu:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Metoda getElementById este folosită în fragmentul de cod de mai sus pentru a alege mai întâi elementul copil după ID. După aceea, folosim atributul parentNode pentru a atribui elementul părinte variabilei parentElement.
Folosind proprietatea parentElement: DOM oferă o proprietate parentElement utilă care poate fi utilizată pentru a obține elementul părinte al unui element HTML în plus față de proprietatea parentNode. Aplicația este foarte asemănătoare cu tehnica anterioară:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Cu o metodă mai ilustrativă și mai ușor de înțeles, putem obține același rezultat utilizând atributul parentElement.
Folosind metoda cea mai apropiată(): Metoda closest() este un alt instrument eficient oferit de browserele contemporane.
Prin utilizarea acestei tehnici, puteți determina care element din arborele unui selector CSS este strămoșul direct al unui element. Utilizarea tehnicii nearest() este demonstrată în următorul exemplu:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Funcția nearest() este apoi apelată în codul de mai sus, furnizând un selector CSS ca argument, după ce metoda getElementById a fost folosită pentru a selecta elementul copil. Primul strămoș al elementului care se potrivește cu selecția specificată este returnat de funcția closest().
În acest caz, elementul cu clasa „parent-class” care este cel mai apropiat strămoș al elementului copil este ceea ce încercăm să găsim.
Folosind metode de traversare: Puteți parcurge arborele DOM folosind una dintre numeroasele metode de traversare pe care le oferă JavaScript. Printre acestea se numără metodele parentNode, previousSibling, nextSibling, firstChild și lastChild. Puteți merge la elementul părinte al unui anumit element combinând aceste tehnici. Ca o ilustrare, luați în considerare următoarele
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
În această linie de cod, folosim mai întâi getElementById pentru a alege elementul copil și apoi folosim proprietatea parentNode pentru a obține elementul părinte. Aceste tehnici de traversare vă permit să navigați în sus și în jos în arborele DOM pentru a localiza elementul părinte sau copil necesar.
Utilizarea proprietății parentElement pentru gestionarea evenimentelor: Atunci când utilizați handlere de evenimente JavaScript, poate fi necesar să aveți acces la elementul părinte al țintei evenimentului. Atributul parentElement din handlerul de evenimente poate fi utilizat, de exemplu, dacă aveți o listă de butoane și doriți să efectuați o anumită acțiune atunci când se face clic pe un buton pe elementul părinte.
Iată o ilustrare:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Folosind querySelectorAll, alegem toate componentele din exemplul de cod de mai sus care au clasa „button”. Apoi, fiecare buton are atașat un ascultător de evenimente clic folosind funcția forEach.
Folosim event.target.parentElement pentru a obține acces la elementul părinte din cadrul handler-ului de evenimente. Ca rezultat, atunci când se face clic pe butonul, putem lua măsuri asupra elementului părinte.
Utilizarea proprietății elementului părinte cu elemente dinamice:
Puteți ajunge în circumstanțe în care trebuie să accesați elementul părinte al unui element nou format dacă lucrați cu elemente generate dinamic în aplicația dvs. web.
După adăugarea elementului în DOM, puteți utiliza proprietatea element părinte în anumite circumstanțe.
Ca exemplu, luați în considerare următoarele:
set vs harta
const parentElement = document.getElementById('parent-element'); function createNewElement() { const newElement = document.createElement('div'); // Manipulate the new element parentElement.appendChild(newElement); const newElementParent = newElement.parentElement; // Access the parent element of the newly created element } În această linie de cod, folosim mai întâi getElementById pentru a alege elementul părinte. Apoi, folosind funcția appendChild din cadrul funcției createNewElement, creăm un nou element, îl modificăm după cum este necesar și îl adăugăm la elementul părinte.
Folosind proprietatea parentElement, putem obține elementul părinte al noului element după ce l-am adăugat în DOM.
Folosind proprietatea offsetParent:
În unele circumstanțe, este posibil să doriți să găsiți elementul care este strămoșul cel mai apropiat al unui anumit element. Puteți realiza acest lucru folosind proprietatea offsetParent. Este returnat cel mai apropiat element strămoș cu o altă poziție decât static, care este poziționarea implicită.
Iată o ilustrare:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
În fragmentul de cod menționat mai sus, folosim mai întâi metoda getElementById pentru a alege elementul copil, iar apoi atributul offsetParent este folosit pentru a desemna elementul strămoș cel mai apropiat de variabila numită positionedAncestor.
Utilizarea proprietății parentNode cu diferite tipuri de noduri:
Puteți naviga în arborele DOM și puteți ajunge la părintele mai multor tipuri de noduri, cum ar fi nodurile text și nodurile de comentariu, în plus față de a ajunge la elementul părinte al unui element HTML.
aliniați imaginea css
Puteți naviga mai ușor în arborele DOM utilizând proprietatea parentNode, care funcționează cu diferite tipuri de noduri. Ca exemplu, luați în considerare următoarele:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
În acest exemplu, folosim funcția createTextNode pentru a produce un nod text. Proprietatea parentNode este apoi folosită pentru a prelua elementul părinte. Când aveți de-a face cu structuri DOM complicate care conțin o varietate de noduri, această strategie poate fi utilă.
Folosind proprietatea parentElement cu Shadow DOM:
Poate fi necesar să accesați elementul părinte din interiorul limitei Shadow DOM dacă lucrați cu Shadow DOM, o tehnologie web care permite încapsularea arborilor DOM și a stilurilor CSS.
În acest caz, proprietatea parentElement este de asemenea aplicabilă.
Ca exemplu, luați în considerare următoarele:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Atributul shadowRoot al elementului gazdă este folosit în codul de mai sus pentru a obține mai întâi rădăcina umbră. Folosind funcția getElementById, alegem apoi elementul copil din rădăcina umbră pe baza ID-ului său.
Folosind proprietatea parentElement, putem prelua în sfârșit elementul părinte. Acest lucru vă permite să accesați elementul părinte chiar și în interiorul unui Shadow DOM.
Elemente poziționate cu proprietatea offsetParent :
Puteți utiliza proprietatea offsetParent împreună cu proprietățile offsetLeft și offsetTop pentru a localiza elementul strămoș poziționat cel mai apropiat al unui element dat, dacă trebuie în mod explicit să faceți acest lucru.
Iată o ilustrare:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Folosind getElementById, alegem mai întâi elementul țintă din această linie de cod. După aceea, offsetParent al elementului țintă este utilizat pentru a inițializa variabila positionedAncestor.
Următorul pas este să determinați dacă Ancestroul poziționat curent are o poziție calculată „statică” folosind o buclă while.
positionedAncestor este actualizat la offsetParent al positionedAncestor curent dacă o face.
Acest proces continuă până când găsim strămoșul care este cel mai aproape de locația noastră actuală sau ajungem în vârful arborelui DOM.
Vă puteți îmbunătăți și mai mult capacitatea de a prelua elementul părinte în JavaScript utilizând aceste strategii și metode suplimentare. Aceste metode oferă răspunsuri la o serie de probleme, inclusiv gestionarea Shadow DOM, tratarea diferitelor tipuri de noduri și localizarea celui mai apropiat strămoș.
cuvânt cheie final în java
Alegeți o tehnică care să corespundă cerințelor dumneavoastră unice și să vă îmbunătățească abilitățile de manipulare a DOM.
Dacă utilizați metode sau funcții mai noi, nu uitați să testați temeinic codul într-o varietate de browsere pentru a verifica compatibilitatea.
Veți fi echipat cu cunoștințele și abilitățile de a lucra cu elementele părinte în JavaScript și de a crea experiențe online dinamice și interactive după ce veți înțelege ferm aceste concepte.
Acum aveți la dispoziție metode suplimentare în JavaScript pentru a ajunge la elementul părinte.
Înțelegerea acestor tehnici vă va îmbunătăți capacitatea de a modifica și de a interacționa corect cu DOM, indiferent dacă lucrați cu gestionarea evenimentelor, elemente dinamice sau trebuie să descoperiți strămoșul cel mai apropiat.
Selectați întotdeauna abordarea care se potrivește cel mai bine cazului dvs. unic de utilizare, ținând cont de compatibilitatea cu browserul și de nevoile precise ale proiectului dvs. Cu aceste metode la dispoziția dumneavoastră, veți fi echipat cu abilitățile necesare pentru a explora și lucra cu ușurință componentele părinte în JavaScript.