JavaScript Obtener padre
-
Obtener padre con las propiedades
parentNodeyparentElement -
Use la propiedad
parentNodepara obtener el padre -
Use la propiedad
parentElementpara 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:
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:
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:
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>
Producción:
