JavaScript és un potent llenguatge de script que ofereix als programadors la possibilitat de crear llocs web dinàmics i interactius. Trobar l'element principal d'un element específic és una operació freqüent quan es treballa amb el model d'objectes de document (DOM).
Aquí, veurem una varietat d'enfocaments basats en JavaScript per aconseguir-ho.
L'element pare d'un element HTML es pot trobar utilitzant l'atribut parentNode, que és el mètode més fàcil. Quan es proporciona un element, aquest atribut retorna el node pare de l'element a l'arbre DOM. L'ús d'aquest atribut s'il·lustra amb l'exemple següent:
nom de caràcters especials
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
El mètode getElementById s'utilitza al fragment de codi anterior per triar primer l'element secundari per ID. Després d'això, utilitzem l'atribut parentNode per assignar l'element pare a la variable parentElement.
Utilitzant la propietat parentElement: El DOM ofereix una propietat parentElement útil que es pot utilitzar per obtenir l'element pare d'un element HTML a més de la propietat parentNode. L'aplicació és molt semblant a la tècnica anterior:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Amb un mètode més il·lustratiu i entenedor, podem aconseguir el mateix resultat utilitzant l'atribut parentElement.
Fent ús del mètode més proper(): El mètode closest() és una altra eina eficaç que ofereixen els navegadors contemporanis.
Amb l'ús d'aquesta tècnica, podeu determinar quin element de l'arbre d'un selector CSS és l'avantpassat directe d'un element. L'ús de la tècnica nearest() es demostra a l'exemple següent:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
A continuació, es crida la funció més propera () al codi anterior, proporcionant un selector CSS com a argument, després que s'hagi utilitzat el mètode getElementById per seleccionar l'element fill. La funció més propera () retorna el primer avantpassat de l'element que coincideix amb la selecció especificada.
En aquest cas, l'element amb la classe 'parent-class' que és l'avantpassat més proper de l'element fill és el que estem intentant trobar.
Ús de mètodes de travessa: Podeu recórrer l'arbre DOM mitjançant un dels molts mètodes de recorregut que ofereix JavaScript. Els mètodes parentNode, previousSibling, nextSibling, firstChild i lastChild es troben entre ells. Podeu anar a l'element pare d'un element concret combinant aquestes tècniques. Com a il·lustració, tingueu en compte el següent
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
En aquesta línia de codi, primer utilitzem getElementById per triar l'element fill i després fem servir la propietat parentNode per obtenir el seu element pare. Aquestes tècniques de recorregut us permeten navegar amunt i avall per l'arbre DOM per localitzar l'element pare o fill necessari.
Utilitzant la propietat parentElement per a la gestió d'esdeveniments: Quan feu servir gestors d'esdeveniments de JavaScript, pot ser necessari tenir accés a l'element principal de l'objectiu de l'esdeveniment. L'atribut parentElement del controlador d'esdeveniments es pot utilitzar, per exemple, si teniu una llista de botons i voleu fer alguna acció quan es fa clic en un botó a l'element pare.
Aquí teniu una il·lustració:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Utilitzant querySelectorAll, escollim tots els components de la mostra de codi anterior que tenen la classe 'botó'. A continuació, cada botó té un oient d'esdeveniments de clic adjunt mitjançant la funció forEach.
Utilitzem event.target.parentElement per accedir a l'element pare dins del controlador d'esdeveniments. Com a resultat, quan es fa clic al botó, podem actuar sobre l'element principal.
Utilitzant la propietat de l'element pare amb elements dinàmics:
Podeu entrar en circumstàncies en què necessiteu accedir a l'element principal d'un element nou format si esteu treballant amb elements generats dinàmicament a la vostra aplicació web.
Després d'afegir l'element al DOM, podeu utilitzar la propietat de l'element pare en determinades circumstàncies.
Com a il·lustració, tingueu en compte el següent:
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 } En aquesta línia de codi, primer utilitzem getElementById per triar l'element pare. A continuació, utilitzant la funció appendChild dins de la funció createNewElement, creem un nou element, el modifiquem segons sigui necessari i l'afegim a l'element pare.
Utilitzant la propietat parentElement, podem obtenir l'element pare de l'element nou després d'afegir-lo al DOM.
Utilitzant la propietat offsetParent:
En algunes circumstàncies, és possible que vulgueu trobar l'element que és l'avantpassat més proper d'un element concret. Podeu fer-ho mitjançant la propietat offsetParent. Es retorna l'element antecessor més proper amb una posició diferent de l'estàtica, que és la posició per defecte.
Aquí teniu una il·lustració:
ordenació d'inserció en java
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
En el fragment de codi esmentat, primer utilitzem el mètode getElementById per triar l'element fill i, a continuació, s'utilitza l'atribut offsetParent per designar l'element avantpassat més proper a la variable anomenada positionedAncestor.
Ús de la propietat parentNode amb diferents tipus de nodes:
Podeu navegar per l'arbre DOM i arribar a l'element pare de diversos tipus de nodes, com ara nodes de text i nodes de comentari, a més d'arribar a l'element pare d'un element HTML.
Podeu navegar més fàcilment per l'arbre DOM mitjançant la propietat parentNode, que funciona amb diferents tipus de nodes. Com a il·lustració, tingueu en compte el següent:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
En aquest exemple, utilitzem la funció createTextNode per produir un node de text. La propietat parentNode s'utilitza llavors per recuperar l'element pare. Quan es tracta d'estructures DOM intricades que contenen una varietat de nodes, aquesta estratègia pot ser útil.
Utilitzant la propietat parentElement amb el Shadow DOM:
És possible que hàgiu d'accedir a l'element principal dins del límit Shadow DOM si esteu treballant amb Shadow DOM, una tecnologia web que permet l'encapsulació d'arbres DOM i estils CSS.
En aquest cas, la propietat parentElement també és aplicable.
Com a il·lustració, tingueu en compte el següent:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
L'atribut shadowRoot de l'element amfitrió s'utilitza al codi anterior per adquirir primer l'arrel shadow. Utilitzant la funció getElementById, escollim l'element fill dins de l'arrel ombra en funció del seu ID.
Utilitzant la propietat parentElement, finalment podem recuperar l'element pare. Això us permet accedir a l'element pare fins i tot dins d'un Shadow DOM.
Elements posicionats amb la propietat offsetParent:
Podeu utilitzar la propietat offsetParent juntament amb les propietats offsetLeft i offsetTop per localitzar l'element avantpassat més proper d'un element determinat si ho necessiteu de manera explícita.
Aquí teniu una il·lustració:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Utilitzant getElementById, primer triem l'element objectiu en aquesta línia de codi. Després d'això, l'offsetParent de l'element objectiu s'utilitza per inicialitzar la variable positionedAncestor.
El següent pas és determinar si l'Ancestor posicionat actual té una posició calculada 'estàtica' mitjançant un bucle while.
positionedAncestor s'actualitza a l'offsetParent del positionedAncestor actual si ho fa.
Aquest procés continua fins que localitzem l'ancestre més proper a la nostra ubicació actual o arribem a la part superior de l'arbre DOM.
Podeu millorar encara més la vostra capacitat per recuperar l'element principal a JavaScript utilitzant aquestes estratègies i mètodes addicionals. Aquests mètodes ofereixen respostes a una sèrie de problemes, com ara el maneig de Shadow DOM, el tractament amb diversos tipus de nodes i la localització de l'ancestre més proper.
Trieu una tècnica que compleixi els vostres requisits únics i millori les vostres habilitats de manipulació DOM.
Si utilitzeu mètodes o funcions més nous, no us oblideu de provar a fons el vostre codi en diversos navegadors per verificar la compatibilitat.
Estaràs equipat amb els coneixements i les habilitats per treballar amb elements parentals en JavaScript i crear experiències en línia dinàmiques i interactives després d'haver entès amb fermesa aquests conceptes.
codi de Fibonacci java
Ara teniu mètodes addicionals disponibles a JavaScript per arribar a l'element principal.
Entendre aquestes tècniques millorarà la vostra capacitat per modificar i interactuar correctament amb el DOM, tant si esteu treballant amb la gestió d'esdeveniments, elements dinàmics o si necessiteu descobrir l'avantpassat més proper.
Seleccioneu sempre l'enfocament que millor s'adapti al vostre cas d'ús únic, tenint en compte la compatibilitat del navegador i les necessitats precises del vostre projecte. Amb aquests mètodes a la vostra disposició, estaràs equipat amb les habilitats necessàries per explorar i treballar amb els components principals en JavaScript amb facilitat.