JavaScript je močan skriptni jezik, ki programerjem omogoča izdelavo dinamičnih, interaktivnih spletnih mest. Iskanje nadrejenega elementa določenega elementa je pogosta operacija pri delu z dokumentnim objektnim modelom (DOM).
Tukaj si bomo ogledali različne pristope, ki temeljijo na JavaScriptu, da to dosežemo.
Nadrejeni element elementa HTML je mogoče najti z uporabo atributa parentNode, kar je najpreprostejši način. Ko je element posredovan, ta atribut vrne nadrejeno vozlišče elementa v drevesu DOM. Uporaba tega atributa je prikazana v naslednjem primeru:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Metoda getElementById se v zgornjem delčku kode uporablja za prvo izbiro podrejenega elementa po ID-ju. Po tem uporabimo atribut parentNode za dodelitev nadrejenega elementa spremenljivki parentElement.
Uporaba lastnosti parentElement: DOM ponuja uporabno lastnost parentElement, ki se lahko uporablja za pridobitev nadrejenega elementa elementa HTML poleg lastnosti parentNode. Aplikacija je zelo podobna prejšnji tehniki:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Z bolj ilustrativno in razumljivo metodo lahko dosežemo enak rezultat z uporabo atributa parentElement.
Uporaba metode closest(): Metoda closest() je še eno učinkovito orodje, ki ga ponujajo sodobni brskalniki.
Z uporabo te tehnike lahko določite, kateri element v drevesu izbirnika CSS je neposredni prednik elementa. Uporaba tehnike nearest() je prikazana v naslednjem primeru:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Funkcija nearest() se nato v zgornji kodi pokliče, pri čemer kot argument zagotovi izbirnik CSS, potem ko je bila za izbiro podrejenega elementa uporabljena metoda getElementById. Prvega prednika elementa, ki se ujema z podanim izborom, vrne funkcija closest().
pretvorba niza v int java
V tem primeru poskušamo najti element z razredom 'nadrejeni razred', ki je najbližji prednik podrejenega elementa.
Uporaba metod prečkanja: Po drevesu DOM se lahko premikate z eno od številnih metod prečkanja, ki jih ponuja JavaScript. Med njimi so metode parentNode, previousSibling, nextSibling, firstChild in lastChild. S kombiniranjem teh tehnik se lahko pomaknete do nadrejenega elementa določenega elementa. Za ponazoritev razmislite o naslednjem
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
V tej vrstici kode najprej uporabimo getElementById, da izberemo podrejeni element, nato pa uporabimo lastnost parentNode, da pridobimo njegov nadrejeni element. Te tehnike prečkanja vam omogočajo krmarjenje gor in dol po drevesu DOM, da poiščete zahtevani nadrejeni ali podrejeni element.
Uporaba lastnosti parentElement za obravnavo dogodkov: Pri uporabi obdelovalcev dogodkov JavaScript bo morda treba imeti dostop do nadrejenega elementa cilja dogodka. Atribut parentElement v obdelovalniku dogodkov se lahko uporabi na primer, če imate seznam gumbov in želite izvesti nekaj dejanja, ko kliknete gumb na nadrejenem elementu.
Tukaj je ilustracija:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Z uporabo querySelectorAll izberemo vse komponente v zgornjem vzorcu kode, ki imajo razred 'button'. Nato ima vsak gumb pritrjen poslušalec dogodka klika s funkcijo forEach.
Event.target.parentElement uporabljamo za pridobitev dostopa do nadrejenega elementa znotraj obdelovalnika dogodkov. Posledično, ko kliknemo gumb, lahko ukrepamo na nadrejenem elementu.
Uporaba lastnosti nadrejenega elementa z dinamičnimi elementi:
Lahko se znajdete v okoliščinah, ko boste morali dostopati do nadrejenega elementa na novo oblikovanega elementa, če delate z dinamično ustvarjenimi elementi v svoji spletni aplikaciji.
Ko dodate element v DOM, lahko v določenih okoliščinah uporabite lastnost nadrejenega elementa.
Za ponazoritev upoštevajte naslednje:
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 } V tej vrstici kode najprej uporabimo getElementById za izbiro nadrejenega elementa. Nato s funkcijo appendChild znotraj funkcije createNewElement ustvarimo nov element, ga po potrebi spremenimo in dodamo nadrejenemu elementu.
Z lastnostjo parentElement lahko pridobimo nadrejeni element novega elementa, potem ko ga dodamo v DOM.
Uporaba lastnosti offsetParent:
V nekaterih okoliščinah boste morda želeli poiskati element, ki je najbližji prednik določenega elementa. To lahko dosežete z lastnostjo offsetParent. Vrnjen je najbližji element prednika s položajem, ki ni statični, kar je privzeti položaj.
Tukaj je ilustracija:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
V zgoraj omenjenem izrezku kode najprej uporabimo metodo getElementById za izbiro podrejenega elementa, nato pa je atribut offsetParent uporabljen za določitev najbližjega pozicioniranega elementa prednika spremenljivki z imenom positionedAncestor.
Uporaba lastnosti parentNode z različnimi vrstami vozlišč:
Lahko krmarite po drevesu DOM in pridete do nadrejenega elementa več vrst vozlišč, kot so besedilna vozlišča in vozlišča komentarjev, poleg tega, da pridete do nadrejenega elementa elementa HTML.
Po drevesu DOM lahko lažje krmarite z uporabo lastnosti parentNode, ki deluje z različnimi vrstami vozlišč. Za ponazoritev upoštevajte naslednje:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
V tem primeru uporabimo funkcijo createTextNode za izdelavo besedilnega vozlišča. Lastnost parentNode se nato uporabi za pridobitev nadrejenega elementa. Ko imate opravka z zapletenimi strukturami DOM, ki vsebujejo različna vozlišča, je ta strategija lahko v pomoč.
Uporaba lastnosti parentElement s senčnim DOM:
sortiraj seznam matrik java
Morda boste morali dostopati do nadrejenega elementa znotraj meje Shadow DOM, če delate s Shadow DOM, spletno tehnologijo, ki omogoča enkapsulacijo dreves DOM in slogov CSS.
V tem primeru je uporabna tudi lastnost parentElement.
nauči se selena
Za ponazoritev upoštevajte naslednje:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Atribut shadowRoot elementa gostitelja se v zgornji kodi uporablja za prvo pridobitev senčnega korena. S funkcijo getElementById nato izberemo podrejeni element znotraj senčnega korena na podlagi njegovega ID-ja.
Z uporabo lastnosti parentElement lahko končno pridobimo nadrejeni element. To vam omogoča dostop do nadrejenega elementa tudi znotraj Shadow DOM.
Pozicionirani elementi z lastnostjo offsetParent:
Lastnost offsetParent lahko uporabite v povezavi z lastnostma offsetLeft in offsetTop, da poiščete najbližji postavljeni element prednika danega elementa, če to izrecno morate storiti.
Tukaj je ilustracija:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Z uporabo getElementById najprej izberemo ciljni element v tej vrstici kode. Po tem se offsetParent ciljnega elementa uporabi za inicializacijo spremenljivke positionedAncestor.
Naslednji korak je ugotoviti, ali ima trenutno postavljeni prednik izračunan položaj 'statičnega' z uporabo zanke while.
positionedAncestor se posodobi na offsetParent trenutnega positionedAncestorja, če je.
Ta proces se nadaljuje, dokler ne najdemo prednika, ki je najbližje naši trenutni lokaciji, ali dokler ne dosežemo vrha drevesa DOM.
Z uporabo teh dodatnih strategij in metod lahko dodatno izboljšate svojo sposobnost pridobivanja nadrejenega elementa v JavaScriptu. Te metode ponujajo odgovore na vrsto težav, vključno z ravnanjem s Shadow DOM, obravnavanjem različnih vrst vozlišč in lociranjem najbližjega prednika.
Izberite tehniko, ki ustreza vašim edinstvenim zahtevam in izboljša vaše sposobnosti manipulacije DOM.
Če uporabljate novejše metode ali funkcije, ne pozabite temeljito preizkusiti svoje kode v različnih brskalnikih, da preverite združljivost.
Opremljeni boste z znanjem in sposobnostmi za delo z nadrejenimi elementi v JavaScriptu in gradnjo dinamičnih in interaktivnih spletnih izkušenj, potem ko boste dobro razumeli te koncepte.
Zdaj imate v JavaScriptu na voljo dodatne metode za doseganje nadrejenega elementa.
Razumevanje teh tehnik bo izboljšalo vašo sposobnost pravilnega spreminjanja in interakcije z DOM, ne glede na to, ali delate z obravnavanjem dogodkov, dinamičnimi elementi ali morate odkriti najbližje postavljenega prednika.
Vedno izberite pristop, ki najbolje ustreza vašemu edinstvenemu primeru uporabe, pri čemer upoštevajte združljivost brskalnika in natančne potrebe vašega projekta. S temi metodami, ki so vam na voljo, boste opremljeni z veščinami, potrebnimi za enostavno raziskovanje in delo z nadrejenimi komponentami v JavaScriptu.