Como acessar o elemento pai usando a propriedade HTML DOM parentElement

Como Acessar O Elemento Pai Usando A Propriedade Html Dom Parentelement



Ao anexar múltiplas funcionalidades no Document Object Model (DOM) usando JavaScript, o desenvolvedor geralmente precisa analisar a associação do elemento. Isso pode ser conseguido registrando o elemento pai do(s) elemento(s) de destino, o que agiliza o fluxo de código e a formatação dos recursos incluídos no site.

Visão geral do conteúdo

Qual é a propriedade “parentElement” em JavaScript?

O ' parentElement ”A propriedade em JavaScript recupera o elemento que é o pai do elemento de destino.

Como acessar/invocar o elemento pai por meio da propriedade HTML DOM parentElement?

O elemento pai pode ser acessado usando o HTML DOM “ parentElement ”propriedade com o“ nome do nó ”Ou recuperando o nó do elemento pai por meio do“ parentNode ' propriedade.





Sintaxe



nó. parentElement

Valor de retorno
Esta propriedade recupera um objeto de elemento que representa o nó do elemento pai de um nó e fornece “ nulo ” se o nó não incluir um pai.



Métodos e propriedades comuns utilizados

document.querySelector() : este método obtém o primeiro elemento que corresponde ao seletor CSS.



Sintaxe

documento. querySelector ( esse )

Nesta sintaxe, “ esse ”refere-se a um ou mais seletores CSS.



document.getElementById() : retorna o elemento com o id especificado.

Sintaxe

documento. getElementById ( eu ia )

Aqui, ' eu ia ”Indica o ID do elemento de destino a ser obtido.

índice selecionado : esta propriedade recupera o índice da opção selecionada na lista suspensa. O '-1' opção desmarca todas as opções.

nome do nó : esta propriedade recupera o nome do nó.

crianças : esta propriedade retorna os elementos filhos do elemento como uma coleção.

HTML externo : esta propriedade aloca ou recupera o elemento HTML, bem como seus atributos e tags de início e fim.

parentNode : esta propriedade específica busca o nó pai de um elemento ou nó.

Observação : A diferença entre “ parentElement ' e ' parentNode ”propriedade é que a propriedade anterior, ou seja, “parentElement” fornece “ nulo ” se o nó pai não refletir um nó de elemento.

Exemplo 1: Acessando o elemento pai por meio da propriedade “parentElement” em JavaScript

Este exemplo invoca o elemento pai de um elemento e exibe o nome do nó (pai) ao clicar no botão.

Código HTML


< HTML >
< corpo >
< h1 > Propriedade parentElement em JavaScript < / h1 >
< h2 > Selecione o idioma: < / h2 >
< selecione aula = 'elemento' >
< opção > Pitão < / opção >
< opção > Java < / opção >
< opção > JavaScript < / opção >
< / selecione >
< botão ao clicar = 'displayParent()' aula = 'botão' > Exibir o elemento pai do elemento 'opção' < / botão >
< divisão aula = 'temperatura' >< / divisão >< / corpo >
< HTML >

Neste código:

  • Especifique o dado “

    ” e “

    ” elementos que compõem os títulos de nível um e nível dois, respectivamente.

  • Depois disso, crie um “” elemento representado pela classe dada que contém os outros elementos filhos, ou seja, “” .
  • Agora, crie um botão associado a um “ ao clicar ” evento que redireciona para o “displayParent()” função ao clicar no botão.
  • Por último, especifique o “
    ” elemento no qual o resultado, ou seja, o elemento pai acessado, deve ser exibido.

Código CSS

>
corpo {
alinhamento de texto : Centro ;
cor : #fff ;
cor de fundo : cinza ;
altura : 100% ;
}
.botão {
altura : 2rem ;
raio da fronteira : 2 pixels ;
largura : 35% ;
margem : 2rem auto ;
mostrar : bloquear ;
cor : #ba0b0b ;
cursor : ponteiro ;
}
.temp {
tamanho da fonte : 1,5 rem ;
espessura da fonte : audacioso ;
}
>

No código CSS acima:

  • Estilize a página da web geral com as propriedades aplicadas de “alinhamento de texto”, “cor de fundo” etc.
  • Da mesma forma, aplique o estilo ao botão criado por meio de sua classe ajustando sua altura, largura, exibição, cor, etc.
  • Finalmente, estilize o “ divisão ” referindo-se ao nome da classe na qual o elemento pai acessado deve ser exibido.

Código JavaScript



< roteiro >
função displayParent ( ) {
era pegar = documento. querySelector ( '.elemento' ) ;
era esse = pegar . opções [ pegar . índice selecionado ] ;
era acrescentar = documento. querySelector ( '.temp' ) ;
acrescentar. HTML interno = 'O elemento pai do elemento de opção é ->' + esse. parentElement . nome do nó ;
}
roteiro >

De acordo com estas linhas de código:

  • Defina a função “displayParent()” que acessa o elemento “