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: 12934 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): <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? 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. |
![]() |
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 |