JavaScript Obtener padre

Anika Tabassum Era 15 febrero 2024

JavaScript JavaScript Parent

Obtener padre con las propiedades parentNode y parentElement
Use la propiedad parentNode para obtener el padre
Use la propiedad parentElement para obtener el padre

En JavaScript, las propiedades para obtener el nombre y el detalle del elemento principal son parentNode y parentElement. Estas dos propiedades juegan un papel idéntico en la definición del nodo principal, pero su rendimiento es ligeramente diferente.

El parentElement es una propiedad de solo lectura que solo se enfoca en el resultado del elemento padre de una estructura específica. Por el contrario, parentNode también es una propiedad de solo lectura, dibujando el nodo del objeto que representa uno de los nodos del árbol del documento.

Obtener padre con las propiedades `parentNode` y `parentElement`

En este ejemplo, examinaremos el comportamiento de las dos propiedades para obtener el padre de una estructura HTML. Si definimos la diferencia, tendremos una excepción para mostrar.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <script>
  console.log(document.documentElement.parentNode);
  console.log(document.documentElement.parentElement);
  </script>
</body>
</html>

Producción:

Obtener principal con las propiedades parentNode y parentElement 1

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <script>
  console.log(document.documentElement.parentNode.nodeName);
  console.log(document.documentElement.parentElement.nodeName);
  </script>
</body>
</html>

Producción:

Obtener principal con las propiedades parentNode y parentElement 2

Como puede ver, la propiedad parentNode tiene el #documenet como su nodo de salida, pero el parentElement da un null. Además, cuando intentamos extraer el nombre del nodo, recibimos un TypeError para parentElement.

Use la propiedad `parentNode` para obtener el padre

Tengamos una instancia que muestre que la instancia de un niño se puede usar para obtener su padre inmediato del árbol de jerarquía. Tomaremos una estructura div anidada y tomaremos el último elemento div declarado como un elemento secundario.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="parent">
  <div id="p2">
    <div id="child"></div>
  </div>
</div>
  <script>
  var ch=document.getElementById("child");
    console.log(ch.parentNode.nodeName);
    console.log(ch.parentNode);
  </script>
</body>
</html>

Producción:

Use la propiedad parentNode para obtener el padre

Tenemos el nombre del nodo, así como el propio nodo para demostración. El padre seleccionado fue el que tenía el id-p2.

Use la propiedad `parentElement` para obtener el padre

Este ejemplo obtendrá el elemento primario inmediato de la instancia de nuestros elementos secundarios seleccionados.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li id="child"></li>
</ul>
  <script>
  var ch=document.getElementById("child");
    console.log(ch.parentElement.nodeName);
  </script>
</body>
</html>