Você está aqui: JavaScript ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Navegação e Pesquisa de Nós (Nodes) |
Como usar a propriedade parentNode para retornar o objeto pai de um elemento na hierarquia do DOM do JavaScriptQuantidade de visualizações: 10578 vezes |
|
Em algumas situações precisamos verificar o objeto pai do elemento atual na hierarquia do DOM (Document Object Model). Para isso podemos usar a propriedade parentNode. Veja um trecho de código no qual temos um elemento <a> (um link) dentro de um elemento div. Note como usamos uma função para obter o elemento pai do link e exibir seu nome de tag e valor da propriedade id: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function obterParentNode(){
// vamos obter o link com o id "link"
var no = document.getElementById("link");
// vamos obter o nó pai deste link
var noPai = no.parentNode;
// vamos exibir o nome da tag e id do nó pai
window.alert("A tag do nó pai é: " + noPai.tagName);
// vamos exibir o valor da propriedade id do nó pai
window.alert("O id do nó pai é: " + noPai.id);
}
</script>
</head>
<body>
<div id="container">
<a id="link" href="http://www.google.com">Sou um link</a>
</div>
<br>
<button onclick="obterParentNode()">Obter Nó Pai do Link</button>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: A tag do nó pai é: DIV O id do nó pai é: container Veja que o nome da tag do elemento pai é obtido por meio da propriedade tagName. Note também que a propriedade parentNode de um elemento HTML é somente-leitura, ou seja, não podemos alterar seu valor durante a execução de nossos códigos. Esta dica foi escrita e testada no Google Chrome 127.0.6533.122 (Versão oficial) 64 bits. |
 Link para compartilhar na Internet ou com seus amigos: |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
C# - C# Windows Forms - Como verificar o estado da tecla Num Lock em suas aplicações C# Windows Forms JavaScript - Como usar objetos Set em seus códigos JavaScript |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
