 |
Accediendo a un nodo padre (parentNode)
La propiedad parentNode devuelve el nodo padre del nodo especificado, como un objeto Node. Esta propiedad es de sólo lectura.
Nota: En HTML, el documento en sí es el nodo principal del elemento HTML, HEAD y BODY son nodos secundarios del elemento HTML.
<!DOCTYPE html>
<html>
<body> <script>
function myFunction() {
var x = document.getElementById("myLI").parentNode.nodeName;
document.getElementById("demo").innerHTML = x;
}
</script>e><p>Example list:</p>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
<p>Haga clic en el botón para obtener el nombre del nodo principal del elemento li en la lista.</p>
<button onclick="myFunction()">Probar</button>
<p id="demo"></p>
</body>
</html>
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>
function cambiarColor()
{
var puntero=document.getElementById('parrafo1');
var padre=puntero.parentNode;
padre.style.backgroundColor='#ff0000';
}
</script>
</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>
El área de javascript
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';