 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: JavaScript ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Navegação e Pesquisa de Nós (Nodes) |
Como retornar uma coleção de nós filhos de um elemento HTML usando a propriedade childNodes do DOM do JavaScriptQuantidade de visualizações: 13192 vezes |
|
Em algumas situações temos um elemento HTML (um elemento DIV, por exemplo) e gostaríamos de retornar uma coleção contendo seus elementos filhos. Para isso podemos usar a coleção childNodes, definida no World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1. A coleção childNodes contém todos os descendentes diretos de um determinado elemento HTML, incluindo os nós textos (text nodes) e comentários (comment nodes). Além disso, a ordem dos elementos retornados é aquela definida no código-fonte do documento HTML. Veja uma página HTML contendo um elemento DIV e, dentro deste, um parágrafo, um link e um elemento SPAN. Note como usamos a propriedade childNodes no elemento DIV para retornar seus três elementos filhos diretos (note que as quebras de linhas e o elemento BR também serão retornados): ----------------------------------------------------------------------
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 obterNosFilhos(){
// vamos obter uma referência ao elemento div com o id "container"
var pai = document.getElementById("container");
// vamos obter a coleção de elementos filhos
var filhos = pai.childNodes;
// vamos obter a quantidade de elementos filhos deste elemento
window.alert("O elemento div contém " + filhos.length +
" elementos filhos.");
// vamos percorrer todos os elementos
for(var i = 0; i < filhos.length; i++){
var filho = filhos[i];
// este filho é um nó texto?
if(filho.nodeType == 3){
window.alert("O " + (i + 1) + "º filho é um nó texto. " +
"Seu conteúdo é: " + filho.data);
}
// este filho é um nó elemento?
else if(filho.nodeType == 1){
window.alert("O " + (i + 1) + "º filho é um nó elemento. " +
"Seu conteúdo é: " + filho.innerHTML);
}
}
}
</script>
</head>
<body>
<div id="container">
<p>Sou um parágrafo</p>
<a href="http://www.google.com">Sou um link</a><br>
<span>E eu sou um elemento span</span>
</div>
<br>
<button onclick="obterNosFilhos()">Obter nós filhos do elemento div</button>
</body>
</html>
Ao executarmos este código JavaScript nós teremos o seguinte resultado: O elemento div contém 8 elementos filhos. O 1º filho é um nó texto. Seu conteúdo é: O 2º filho é um nó elemento. Seu conteúdo é: Sou um parágrafo O 3º filho é um nó texto. Seu conteúdo é: O 4º filho é um nó elemento. Seu conteúdo é: Sou um link O 5º filho é um nó elemento. Seu conteúdo é: O 6º filho é um nó texto. Seu conteúdo é: O 7º filho é um nó elemento. Seu conteúdo é: E eu sou um elemento span O 8º filho é um nó texto. Seu conteúdo é: Ao executar este exemplo você perceberá que a quantidade de elementos filhos no IE é diferente daquela relatada pelo Firefox. Isso acontece devido à forma que os dois browsers tratam quebras de linhas e espaços. Tenha a certeza de usar a propriedade nodeType para identificar o tipo de elemento filho sendo retornado. A coleção childNodes pode ser chamada a partir dos seguintes elementos: a, abbr, acronym, address, applet, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frameset, h1, h2, h3, h4, h5, h6, head, html, i, img, ins, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xml e xmp. 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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
