Obtener la madre Div de Element - JavaScript

En muchas situaciones, debe hacer que el Div Div de un elemento realice diferentes funcionalidades. Por ejemplo, modificar el contenido de un elemento principal basado en el contenido de un elemento infantil, aplicando un estilo a un grupo de elementos relacionados dentro de un elemento principal común, y así sucesivamente. El "sargento" o "parentnodeLas propiedades en JavaScript pueden ser útiles.

Esta publicación demostrará la forma de obtener el Div principal de cualquier elemento usando JavaScript.

Cómo obtener el Div de Elemento Padre en JavaScript?

Para obtener el Div Div de un elemento, use los siguientes enfoques:

• atributo de crianza
• atributo parentNode

Método 1: Obtenga la división principal del elemento utilizando el atributo "ParentElement"

Utilizar el "sargento"Atributo para obtener el elemento Div Parent en JavaScript. Esta propiedad le da al elemento principal de un elemento dado en el DOM. Muestra "nulo"Si el elemento no tiene padre.

Sintaxis

La siguiente sintaxis se usa para el atributo de ParentElement:

elemento.sargento

Ejemplo

En un archivo HTML, cree un "div"Elemento con un encabezado usando un elemento HTML"H4":

Conseguir el elemento de los padres del elemento

Obtenga la referencia del elemento "H4" en la etiqueta o un archivo JavaScript, utilizando su ID asignada con la ayuda de "getElementById ()" método:

var getParentDivof = documento.getElementById ("encabezado");

Llama a "sargento"Atributo con el encabezado para obtener el padre del elemento" H4 ":

var parentDiv = getParentDivof.Parentralemento;

Imprima el elemento principal resultante en la consola:

consola.log (parentDiv);

Le da al elemento principal, que es "div"De un elemento HTML"H4":

Veamos cuando el elemento principal no es un elemento div.

Aquí, el encabezado está encerrado en el "durar"Elemento, que está encerrado en el"div":

>

Obtener la propiedad principal del elemento utilizando la propiedad 'ParentElement'

Ahora, después de obtener la referencia y el elemento principal del encabezado, verifique si el elemento principal es un "div" utilizando el "nombre del nodo" atributo. Si "Sí", Imprima el elemento más, verifique al padre del elemento principal del encabezado e imprima en la consola:

Si (ParentDiv.NodeName === "Div")
consola.log (parentDiv);

demás
consola.log ("el padre del elemento no es un div, lo es");
consola.log (parentDiv);
var parentDiv = parentDiv.Parentralemento;
consola.log (parentDiv);

Se puede ver que el elemento principal del encabezado no es un "div" es "durar", Por lo tanto, verificaremos a los padres del elemento principal" SPAN "e imprimiremos en la consola que es"div" elemento:

Método 2: Obtenga el Div de Elemento principal utilizando el atributo "ParentNode"

Otra forma es usar el "parentnode" atributo. Es similar al "sargento" propiedad. Ambas propiedades devuelven el nodo principal de un elemento dado en el DOM. Sin embargo, hay una diferencia clave entre estas dos propiedades.

La propiedad "ParentElement" siempre genera un nodo de elemento (un elemento que tiene un nombre de etiqueta), mientras que la propiedad "ParentNode" puede dar el tipo de nodo, incluidos nodos de elementos, nodos de texto, nodos de comentarios, etc.

Sintaxis

Siga la sintaxis dada utilizada para el atributo ParentNode:

elemento.parentnode

Ejemplo

Hay un "div"Elemento que contiene un encabezado con un elemento HTML"H4":

Conseguir el elemento de los padres del elemento

Después de obtener la referencia del elemento, llame a la propiedad ParentNode:

var parentDiv = getParentDivof.parentnode;

Producción

Se trata de obtener el Div Div de un elemento HTML en JavaScript.

Conclusión

Para obtener la división principal de un elemento, use el "sargento" o el "parentnode"Atributos. El "ParentElement" proporciona un nodo de elemento (un elemento que tiene un nombre de etiqueta), mientras que el "ParentNode" proporciona el tipo de nodo. Si sabe que el padre de un elemento siempre va a ser un nodo de elemento, es más seguro usar la propiedad de matriz. Si necesita manejar la posibilidad de obtener un nodo sin elemento, debe usar la propiedad ParentNode. Esta publicación demostró las formas de obtener el DIV principal de un elemento en JavaScript.