Propiedad ParentNode en JavaScript

La propiedad ParentNode en el lenguaje de programación JavaScript se explica y muestra en este artículo, junto con su uso previsto.

una descripción general del ParentNode en JavaScript

La propiedad child de un ParentNode es una propiedad de solo lectura que proporciona una HTMLCollection activa que contiene todos los componentes secundarios del nodo al que se llamó.

Esta colección se devuelve cuando se invoca la propiedad y el cuerpo son algunos nodos secundarios de cada elemento HTML.

Además, las propiedades de los elementos solo tienen acceso de lectura, lo que significa que no podemos editar los nodos de ninguna manera, independientemente de si creemos o no que las características individualizadas son aceptables en el tipo de propiedad parentNode.

Para obtener el nodo principal del hijo nth, necesitamos conocer los nodos secundarios del padre a los que necesitamos acceder. Además, necesitamos saber la cantidad de elementos presentes entre el nodo principal que necesitamos y el nodo secundario al que tenemos acceso.

Tenemos acceso al evento en JavaScript que contiene todos los componentes ahora activos en la pantalla en el orden opuesto a medida que avanzamos del elemento secundario al elemento principal para ubicar el primer elemento principal.

Para ubicar el nodo principal que necesitamos, primero construiremos una función que acepte un evento como argumento y luego repita el evento.

for (var i = event.length; i >= 0; i--) {
}

Ahora que tenemos el evento y el bucle configurados para recorrer todos los elementos de la matriz de eventos, crearemos una variable y le daremos el nombre storedValue.

Luego almacenaremos la matriz de los niños en la variable para que podamos realizar un seguimiento de los elementos que están presentes en la matriz de eventos.

var storedValue = event.children[i];

Cuando terminemos el bucle, el elemento principal que necesitamos se guardará en la variable storedValue. Ponemos el valor que se guardó en la variable padre.

parent = storedValue;

El código completo de la función se muestra a continuación.

function getNthParent(event) {
  for (var i = event.length; i >= 0; i--) {
    var storedValue = event.children[i];
    console.log(storedValue);
  }
  parent = storedValue;
}

Podemos utilizar el bucle while como otro método para encontrar el parentNode que no necesita crear una cadena de parentNode usando . operador.

Vamos a construir una función y llamarla nthParent. Le daremos el elemento y el número n como el número de elementos presentes entre el nodo hijo y el nodo padre.

while (n-- && element) {
  element = element.parentNode;
}

Este código sube por el árbol de nodos hasta que llega al nodo principal.

Una vez que se haya completado la iteración del ciclo, el nodo principal necesario estará accesible para nosotros en la variable del elemento asignada a lo largo de cada ciclo del ciclo.

Después de completar el paso anterior, en el que ubicamos el nodo principal y lo asignamos a la variable del elemento, ahora devolveremos el elemento. Aquí se muestra toda la línea de código, incluido el bucle while.

function nthParent(element, n) {
  while (n-- && element) element = element.parentNode;
  return element;
}

Las técnicas descritas anteriormente son bucles sencillos que atraviesan elementos en una jerarquía, comenzando con el niño y avanzando hacia arriba.

El método recursivo es una estrategia que puede ayudarnos a llegar al nodo principal sin necesidad de usar bucles en nuestro código.

En este método, se escribe una función para obtener el nodo principal inmediato y luego se llama a esa función en el nodo principal obtenido en la fase anterior. Este proceso se repite hasta que el número de elementos sea igual a cero.

Aquí está el código para la declaración de la función y los parámetros que necesitamos pasar.

function getNthParent(elem, n) {}

El elemento y el número de elementos entre el hijo y el padre son los parámetros en este caso.

En este punto, todo lo que se necesita es una condición que traerá de vuelta el nodo principal necesario para que lo usemos.

return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);

Este código comprobará si el valor de n es igual a 0. La función devolverá el elemento si se cumple la condición establecida.

Si este no es el caso, la función se llamará a sí misma en el nodo principal del elemento proporcionado y disminuirá el valor de n en 1 hasta que se convierta en 0 y se cumpla la condición, devolviendo el nodo principal requerido.

Después de completar nuestra función, necesitaremos ejecutar la función de interés y guardar el nodo principal devuelto en una variable de la manera que se muestra a continuación.

var child = getNthparent(someElement, 4);

El elemento secundario que ofrecemos nos da acceso al elemento principal “4º” en este escenario en particular.

El código completo de la técnica recursiva para resolver este problema se puede ver aquí.

function getNthParent(elem, n) {
  return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);
}