6 - Accediendo a un nodo padre (parentNode)


Si tenemos la referencia a un nodo podemos obtener fácilmente la referencia del nodo padre mediante la propiedad parentNode.
Veamos un ejemplo sencillo donde obtenemos la referencia de un párrafo contenido en un div. Luego por medio de esta referencia obtenemos la referencia al div y cambiamos el color de fondo del div.
pagina.html

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div>
<p id="parrafo1">Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="Cambiar color de fondo del div" onClick="cambiarColor()">
</body>
</html>

funciones.js

function cambiarColor()
{
  var puntero=document.getElementById('parrafo1');
  var padre=puntero.parentNode;
  padre.style.backgroundColor='#ff0000';
}

Obtenemos la referencia del párrafo:

  var puntero=document.getElementById('parrafo1');

Ahora accedemos a la propiedad parentNode de la variable inicializada previamente:

  var padre=puntero.parentNode;

Finalmente modificamos el color del div:

  padre.style.backgroundColor='#ff0000';

Retornar