Obtendo o pai da Div of Element - JavaScript

Em muitas situações, você precisa obter a divisão dos pais de um elemento para executar diferentes funcionalidades. Por exemplo, modificando o conteúdo de um elemento pai com base no conteúdo de um elemento filho, aplicando um estilo a um grupo de elementos relacionados dentro de um elemento pai comum e assim por diante. O "ParentElement" ou "parentnode”As propriedades em JavaScript podem ser úteis.

Esta posta.

Como obter o pai da Div of Element em JavaScript?

Para obter a divisão dos pais de um elemento, use as seguintes abordagens:

• atributo parentElement
• atributo parentnode

Método 1: Obtenha a divisão do elemento pai usando o atributo “ParentElement”

Use o "ParentElement”Atributo para obter o elemento Div pai em JavaScript. Esta propriedade dá ao elemento pai de um determinado elemento no DOM. Isto mostra "nulo“Se o elemento não tiver pai.

Sintaxe

A sintaxe a seguir é usada para o atributo parentElement:

elemento.ParentElement

Exemplo

Em um arquivo html, crie um “div”Elemento com um título usando um elemento HTML“H4”:

Obtendo o pai da divisão do elemento

Obtenha a referência do elemento "H4" no tag ou um arquivo JavaScript, utilizando seu ID atribuído com a ajuda de "getElementById ()”Método:

var getParentDivof = documento.getElementById ("cabeçalho");

Ligar para "ParentElement”Atributo com o cabeçalho para obter o pai do elemento“ H4 ”:

var parentDiv = getParentDivof.ParentElement;

Imprima o elemento pai resultante no console:

console.log (parentdiv);

Dá ao elemento pai, que é “div"De um elemento html"H4”:

Vamos ver quando o elemento pai não é um elemento div.

Aqui, o cabeçalho está fechado no “período”Elemento, que está fechado no“div”:

>

Obtendo a divisão dos pais do elemento usando a propriedade 'ParentElement'

Agora, depois de obter a referência e o elemento pai do cabeçalho, verifique se o elemento pai é um “div”Usando o“Nodename”Atributo. Se "sim”, Imprima o elemento mais, verifique o pai do elemento pai do cabeçalho e imprima no console:

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

outro
console.log ("O pai do elemento não é uma div, é");
console.log (parentdiv);
var parentdiv = parentdiv.ParentElement;
console.log (parentdiv);

Pode -se observar que o elemento pai do cabeçalho não é um “div" isso é "período”, Então verificaremos os pais do elemento“ span ”dos pais e imprimiremos no console que é“div" elemento:

Método 2: Obtenha a divisão do elemento pai usando o atributo "parentnode"

Outra maneira é usar o “parentnode”Atributo. É semelhante ao “ParentElement" propriedade. Ambas as propriedades retornam o nó pai de um determinado elemento no DOM. No entanto, há uma diferença importante entre essas duas propriedades.

A propriedade "ParentElement" sempre gera um nó de elemento (um elemento que tem um nome de tag), enquanto a propriedade "ParentNode" pode fornecer o tipo de nó, incluindo nós de elemento, nós de texto, nós de comentários e assim por diante.

Sintaxe

Siga a sintaxe dada usada para o atributo parentnode:

elemento.parentnode

Exemplo

Existe um "div”Elemento que contém um título com um elemento HTML“H4”:

Obtendo o pai da divisão do elemento

Depois de obter a referência do elemento, ligue para a propriedade ParentNode:

var parentDiv = getParentDivof.parentnode;

Saída

Isso se trata de fazer com que o pai ou mãe de um elemento HTML em JavaScript.

Conclusão

Para obter o pai da Div de um elemento, use o “ParentElement" ou o "parentnode" atributos. O "ParentElement" fornece um nó de elemento (um elemento que tem um nome de tag), enquanto o "pislenode" fornece o tipo de nó. Se você souber que o pai de um elemento sempre será um nó de elemento, é mais seguro usar a propriedade ParentElement. Se você precisar lidar com a possibilidade de obter um nó não eleitoral, você deve usar a propriedade ParentNode. Esta posta.