JavaScript yra galinga scenarijų kalba, suteikianti programuotojams galimybę kurti dinamines, interaktyvias svetaines. Konkretaus elemento pirminio elemento radimas yra dažna operacija dirbant su dokumento objekto modeliu (DOM).
Čia apžvelgsime įvairius JavaScript pagrįstus metodus, kaip tai pasiekti.
Pirminį HTML elemento elementą galima rasti naudojant atributą parentNode, kuris yra lengviausias būdas. Kai pateikiamas elementas, šis atributas grąžina pagrindinį elemento mazgą DOM medyje. Šio atributo naudojimas iliustruojamas tokiu pavyzdžiu:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Metodas getElementById naudojamas aukščiau esančiame kodo fragmente, norint pirmiausia pasirinkti antrinį elementą pagal ID. Po to mes naudojame atributą parentNode, kad priskirtume pagrindinį elementą parentElement kintamajam.
ParentElement nuosavybės naudojimas: DOM siūlo naudingą pirminio elemento ypatybę, kuri gali būti naudojama norint gauti pagrindinį HTML elemento elementą, be tėvųNode nuosavybės. Taikymas labai panašus į ankstesnę techniką:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Naudodami iliustratyvesnį ir suprantamesnį metodą galime pasiekti tą patį rezultatą naudodami atributą parentElement.
Artimiausio() metodo naudojimas: Artimiausias() metodas yra dar vienas veiksmingas įrankis, kurį siūlo šiuolaikinės naršyklės.
Naudodami šią techniką galite nustatyti, kuris elementas CSS parinkiklio medyje yra tiesioginis elemento protėvis. Artimiausio() technikos naudojimas parodytas šiame pavyzdyje:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Tada aukščiau esančiame kode iškviečiama artimiausia () funkcija, pateikiant CSS parinkiklį kaip argumentą, po to, kai antriniam elementui pasirinkti buvo naudojamas getElementById metodas. Pirmąjį elemento protėvį, atitinkantį nurodytą pasirinkimą, grąžina artimiausia () funkcija.
Šiuo atveju mes bandome rasti elementą su klase „parent-class“, kuris yra artimiausias antrinio elemento protėvis.
Perėjimo metodų naudojimas: Galite apeiti DOM medį naudodami vieną iš daugelio „JavaScript“ siūlomų perėjimo metodų. Tarp jų yra tėvųNode, previousSibling, nextSibling, firstChild ir lastChild metodai. Sujungę šiuos metodus, galite pereiti prie pagrindinio konkretaus elemento elemento. Kaip iliustraciją apsvarstykite toliau pateiktą informaciją
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Šioje kodo eilutėje pirmiausia naudojame getElementById, kad pasirinktume antrinį elementą, o tada naudojame ypatybę parentNode, kad gautume pagrindinį elementą. Šie perėjimo būdai leidžia naršyti aukštyn ir žemyn DOM medyje, kad surastumėte reikiamą pirminį arba antrinį elementą.
ParentElement nuosavybės naudojimas įvykiams tvarkyti: Naudojant „JavaScript“ įvykių tvarkykles, gali prireikti turėti prieigą prie pagrindinio įvykio paskirties elemento. Įvykių tvarkyklėje esantis atributas parentElement gali būti naudojamas, pavyzdžiui, jei turite mygtukų sąrašą ir norite atlikti tam tikrus veiksmus, kai spustelėjamas mygtukas ant pirminio elemento.
Štai iliustracija:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Naudodami querySelectorAll aukščiau esančiame kodo pavyzdyje parenkame visus komponentus, kurių klasė yra „mygtukas“. Tada kiekvienas mygtukas turi spustelėjimo įvykių klausytoją, prijungtą naudojant funkciją „forEach“.
Naudojame event.target.parentElement, kad gautume prieigą prie pirminio elemento įvykių tvarkyklėje. Dėl to spustelėjus mygtuką galime imtis veiksmų su pirminiu elementu.
Pirminio elemento nuosavybės naudojimas su dinaminiais elementais:
avl medžio sukimasis
Jei žiniatinklio programoje dirbate su dinamiškai sugeneruotais elementais, galite patekti į aplinkybes, kai jums reikia pasiekti naujai suformuoto elemento pirminį elementą.
Pridėję elementą prie DOM, tam tikromis aplinkybėmis galite naudoti pirminio elemento ypatybę.
Kaip iliustraciją, apsvarstykite šiuos dalykus:
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 } Šioje kodo eilutėje pirmiausia naudojame getElementById, kad pasirinktume pagrindinį elementą. Tada, naudodami funkciją appendChild funkcijoje createNewElement, sukuriame naują elementą, modifikuojame jį pagal poreikį ir pridedame prie pirminio elemento.
Naudodami ypatybę parentElement, mes galime gauti naujo elemento pirminį elementą pridėję jį prie DOM.
OffsetParent Property naudojimas:
Tam tikromis aplinkybėmis galbūt norėsite rasti elementą, kuris yra artimiausias konkretaus elemento protėvis. Tai galite padaryti naudodami offsetParent nuosavybę. Grąžinamas artimiausias pirmtako elementas, kurio padėtis yra kita nei statinė, kuri yra numatytoji padėtis.
Štai iliustracija:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
Pirmiau minėtame kodo fragmente pirmiausia naudojame metodą getElementById, kad pasirinktume antrinį elementą, o tada atributas offsetParent naudojamas artimiausiam pirmtako elementui priskirti kintamajam, pavadintam positionedAncestor.
ParentNode ypatybės naudojimas su skirtingais mazgų tipais:
Galite naršyti DOM medį ir pasiekti kelių tipų mazgus, pvz., teksto mazgus ir komentarų mazgus, ne tik pirminį HTML elemento elementą.
Galite lengviau naršyti po DOM medį naudodami ypatybę parentNode, kuri veikia su skirtingais mazgų tipais. Kaip iliustraciją apsvarstykite šiuos dalykus:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
Šiame pavyzdyje teksto mazgui sukurti naudojame funkciją createTextNode. Tada ypatybė parentNode naudojama pirminiam elementui gauti. Ši strategija gali būti naudinga dirbant su sudėtingomis DOM struktūromis, kuriose yra įvairių mazgų.
ParentElement ypatybės naudojimas su šešėliniu DOM:
Jei dirbate su Shadow DOM, žiniatinklio technologija, leidžiančia įterpti DOM medžius ir CSS stilius, gali reikėti pasiekti pagrindinį elementą, esantį šešėlinės DOM ribose.
Šiuo atveju taip pat taikoma ypatybė parentElement.
Kaip iliustraciją apsvarstykite šiuos dalykus:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Pagrindinio elemento atributas shadowRoot naudojamas aukščiau esančiame kode, norint pirmiausia gauti šešėlinę šaknį. Naudodami funkciją getElementById, mes pasirenkame antrinį elementą šešėlinėje šaknyje pagal jo ID.
Naudodami ypatybę parentElement, pagaliau galime nuskaityti pagrindinį elementą. Tai leidžia pasiekti pagrindinį elementą net šešėliniame DOM viduje.
Išdėstyti elementai su poslinkio pradine nuosavybe:
Galite naudoti ypatybę offsetParent kartu su ypatybėmis offsetLeft ir offsetTop, kad surastumėte artimiausią tam tikro elemento protėvio elementą, jei to reikia padaryti.
Štai iliustracija:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Naudodami getElementById, pirmiausia pasirenkame tikslinį elementą šioje kodo eilutėje. Po to tikslinio elemento offsetParent naudojamas inicijuoti pozicionuojamą Ancestor kintamąjį.
Kitas veiksmas yra nustatyti, ar dabartinės padėties protėvis turi apskaičiuotą „statinę“ padėtį, naudojant ciklą „when“.
positionedAncestor atnaujinama į offsetParent dabartinio pozicionuoto Ancestor, jei taip yra.
Šis procesas tęsiasi tol, kol surasime protėvį, esantį arčiausiai mūsų dabartinės vietos, arba pasieksime DOM medžio viršūnę.
Naudodami šias papildomas strategijas ir metodus galite dar labiau pagerinti savo gebėjimą nuskaityti pirminį elementą „JavaScript“. Šie metodai siūlo atsakymus į daugybę problemų, įskaitant šešėlinio DOM tvarkymą, įvairių tipų mazgų tvarkymą ir artimiausio protėvio vietos nustatymą.
Pasirinkite techniką, kuri atitinka jūsų unikalius reikalavimus ir pagerina jūsų DOM manipuliavimo įgūdžius.
Jei naudojate naujesnius metodus ar funkcijas, nepamirškite nuodugniai išbandyti kodą įvairiose naršyklėse, kad patikrintumėte suderinamumą.
Tvirtai supratę šias sąvokas turėsite žinių ir gebėjimų dirbti su pirminiais „JavaScript“ elementais ir kurti dinamišką bei interaktyvią internetinę patirtį.
nginx
Dabar galite naudoti papildomus „JavaScript“ metodus, kad pasiektumėte pagrindinį elementą.
Šių metodų supratimas pagerins jūsų gebėjimą tinkamai modifikuoti ir sąveikauti su DOM, nesvarbu, ar dirbate su įvykių tvarkymu, dinaminiais elementais, ar norite atrasti artimiausią protėvį.
Visada pasirinkite metodą, kuris geriausiai atitinka jūsų unikalų naudojimo atvejį, atsižvelgdamas į naršyklės suderinamumą ir tikslius projekto poreikius. Naudodami šiuos metodus turėsite įgūdžių, reikalingų norint lengvai tyrinėti pagrindinius „JavaScript“ komponentus ir su jais dirbti.