Proprietà parentElement dell'elemento HTML DOM

Definizione e uso

parentElement la proprietà restituisce l'elemento padre dell'elemento specificato.

parentElement e parentNode la differenza è che, se il nodo padre non è un nodo di elemento, allora parentElement Restituisce null:

document.body.parentNode; // Restituisce l'elemento <html>
document.body.parentElement; // Restituisce l'elemento <html>
document.documentElement.parentNode; // Restituisce il nodo del documento
document.documentElement.parentElement; // Restituisce null (<html> non ha un nodo padre ELEMENT)

Nella maggior parte dei casi, non importa quale proprietà utilizzare, ma parentNode può essere uno dei più popolari.

Questa proprietà è sola lettura.

Nodi HTML e elementi

In HTML DOM(document object model), l'HTML documento è una raccolta di nodi che possiedono (o non possiedono) nodi figli.

NodoSi riferisce ai nodi di elemento, di testo e di commento.

ElementoTra i nodi vuoti c'è anche un nodo di testo.

mentre l'elemento è solo un nodo di elemento.

Nodo figlio e elemento figlio

childNodes RestituisceNodo figlio(nodi di elemento, di testo e di commento).

children RestituisceElemento figlio(piuttosto che nodi di testo e commenti).

Gemello e elemento gemello

GemelloSono chiamati "fratelli" e "sorelle".

GemelloSono i nodi che condividono lo stesso nodo padre (nello stesso childNodes della lista).

Elemento gemelloSono gli elementi che condividono lo stesso padre elementare (nello stesso children della lista).

Esempio

Esempio 1

Ottenere il nome del nodo del padre dell'elemento <li>:

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

Prova tu stesso

Esempio 2

Cliccando sull'elemento (<span>) è possibile nascondere il suo elemento padre (<div>):

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

Prova tu stesso

Sintassi

node.parentElement

Valore di ritorno

Tipo Descrizione
Oggetto Element Rappresenta il nodo padre dell'elemento.
null Se il nodo non ha un nodo padre.

Supporto del browser

element.parentElement È una caratteristica del livello DOM 3 (2004).

Tutti i browser lo supportano completamente:

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