Ottenere il Div Parent di Element - JavaScript

In molte situazioni, è necessario ottenere il Parent Div di un elemento per svolgere diverse funzionalità. Ad esempio, modificare il contenuto di un elemento genitore in base al contenuto di un elemento figlio, applicando uno stile a un gruppo di elementi correlati all'interno di un elemento genitore comune e così via. IL "parentelement" O "parentele"Le proprietà in JavaScript possono essere utili.

Questo post dimostrerà il modo per ottenere il Div principale di qualsiasi elemento usando JavaScript.

Come ottenere il div genitore dell'elemento in javascript?

Per ottenere il Div genitore di un elemento, utilizzare i seguenti approcci:

• attributo parentelement
• attributo parenternode

Metodo 1: ottieni l'attributo "Parent Div Element Using" parentelement "

Usa il "parentelement"Attributo per ottenere l'elemento Parent Div in JavaScript. Questa proprietà fornisce l'elemento genitore di un determinato elemento nel DOM. Mostra "nullo"Se l'elemento non ha un genitore.

Sintassi

La seguente sintassi viene utilizzata per l'attributo parentelement:

elemento.parentelement

Esempio

In un file HTML, crea un "div"Elemento con un'intestazione usando un elemento HTML"H4":

Ottenere il div genitore dell'elemento

Ottieni il riferimento dell'elemento “H4” dell'intestazione in tag o un file JavaScript, utilizzando l'ID assegnato con l'aiuto di "getElementById ()" metodo:

var getpareentdivof = documento.getElementById ("Intestazione");

Chiama il "parentelement"Attributo con l'intestazione per ottenere il genitore dell'elemento" H4 ":

var parentdiv = getparentdivof.parentelement;

Stampa l'elemento genitore risultante sulla console:

console.log (parentdiv);

Dà l'elemento genitore, che è "div"Di un elemento HTML"H4":

Vediamo quando l'elemento genitore non è un elemento div.

Qui, l'intestazione è racchiusa nel "arco"Elemento, che è racchiuso nel"div":

>

Ottenere la proprietà del Parent Div Element usando la proprietà "parentelement"

Ora, dopo aver ottenuto il riferimento e l'elemento genitore dell'intestazione, controlla se l'elemento genitore è un "div" usando il "NODENAME"Attributo. Se "SÌ", Stampare l'elemento dell'elemento, controllare il genitore dell'elemento genitore dell'intestazione e stampare sulla console:

if (parentdiv.noDename === "div")
console.log (parentdiv);

altro
console.log ("Il genitore dell'elemento non è un div, lo è");
console.log (parentdiv);
var parentdiv = parentdiv.parentelement;
console.log (parentdiv);

Si può vedere che l'elemento genitore dell'intestazione non è un "div" suo "arco", Quindi controlleremo il genitore dell'elemento" span "e stamperemo sulla console che è"div"Elemento:

Metodo 2: ottieni l'attributo di Parent Div Element Using "parentNode"

Un altro modo è usare il "parentele"Attributo. È simile al "parentelement" proprietà. Entrambe le proprietà restituiscono il nodo genitore di un determinato elemento nel DOM. Tuttavia, esiste una differenza chiave tra queste due proprietà.

La proprietà "parentelement" emette sempre un nodo dell'elemento (un elemento che ha un nome di tag), mentre la proprietà "parenternode" può fornire il tipo di nodo, inclusi nodi dell'elemento, nodi di testo, nodi di commento e così via.

Sintassi

Seguire la sintassi data utilizzata per l'attributo parenternode:

elemento.parentele

Esempio

C'è un "div"Elemento contenente un'intestazione con un elemento HTML"H4":

Ottenere il div genitore dell'elemento

Dopo aver ottenuto il riferimento dell'elemento, chiamare la proprietà ParentNode:

var parentdiv = getparentdivof.parentele;

Produzione

Si tratta di ottenere il div genitore di un elemento HTML in JavaScript.

Conclusione

Per ottenere il Parent Div di un elemento, usa il "parentelement" o il "parentele"Attributi. Il "parentelement" fornisce un nodo elemento (un elemento che ha un nome tag), mentre il "parenternode" fornisce il tipo di nodo. Se sai che il genitore di un elemento sarà sempre un nodo dell'elemento, è più sicuro utilizzare la proprietà parentelement. Se è necessario gestire la possibilità di ottenere un nodo non elemento, è necessario utilizzare la proprietà ParentNode. Questo post ha dimostrato i modi per ottenere il Div genitore di un elemento in JavaScript.