Propiedad parentElement del objeto Elemento del DOM HTML

Definición y uso

parentElement la propiedad devuelve el elemento padre del elemento especificado.

parentElement y parentNode la diferencia radica en que, si el nodo padre no es un nodo de elemento, entonces parentElement devuelve null:

document.body.parentNode; // devuelve el elemento <html>
document.body.parentElement; // devuelve el elemento <html>
document.documentElement.parentNode; // devuelve el nodo del documento
document.documentElement.parentElement; // devuelve null (<html> no tiene nodo ELEMENT padre)

En la mayoría de los casos, no importa qué propiedad se use, pero parentNode puede ser el más popular.

Esta propiedad es de solo lectura.

Nodo HTML y Elemento

en HTML DOM（Modelo de Objetos de Documento）, el documento HTML es una colección de nodos que tienen (o no tienen) nodos hijos.

nodose refiere a los nodos de elemento, de texto y de comentario.

elementoentre los espacios en blanco también son nodos de texto.

mientras que el elemento es solo un nodo de elemento.

nodo hijo y elemento hijo

childNodes devuelvenodo hijo（nodos de elemento, de texto y de comentario）.

children devuelveelemento hijo（no los nodos de texto y de comentario）.

hermano y elemento hermano

hermanoes "hermano" y "hermana".

hermanoes el nodo que tiene el mismo nodo padre (en el mismo childNodes en la lista).

elemento hermanoes el elemento que tiene el mismo nodo padre (en el mismo children en la lista).

Ejemplo

Ejemplo 1

Obtener el nombre del nodo del elemento padre del elemento <li>:

var x = document.getElementById("myLI").parentElement.nodeName;

Prueba tu mismo

Ejemplo 2

Hacer clic en el elemento (<span>) oculta su elemento padre (<div>):

<div>
  <span onclick="this.parentElement.style.display = 'none';">x</span>
</div>

Prueba tu mismo

Sintaxis

nodo.parentElement

Valor devuelto

Tipo Descripción
Objeto Elemento representa el nodo del elemento padre del nodo.
null si el nodo no tiene nodo padre.

Compatibilidad del navegador

element.parentElement Es una característica del nivel DOM 3 (2004).

Todos los navegadores lo soportan completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte