Você está aqui: JavaScript ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Navegação e Pesquisa de Nós (Nodes)

Usando childNodes para retornar uma coleção de nós filhos de um determinado elemento HTML

Quantidade de visualizações: 12860 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 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 Internet Explorer 8 e Firefox 3.6.

Link para compartilhar na Internet ou com seus amigos:

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como retornar o código ASCII ou Unicode associado a um caractere em JavaScript usando a função charCodeAt()

Quantidade de visualizações: 113 vezes

O método charCodeAt() é usado para obter o código ASCII ou Unicode de um caractere em uma determinada posição em uma string. Esta função está disponível no objeto String do JavaScript.

Veja um página HTML completa demonstrando o seu uso:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Strings em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var palavra = "Arquivo";
  document.write("O código Unicode da letra \"A\" é " +
    palavra.charCodeAt(0));  
</script>
  
</body>
</html>

Ao executar este código JavaScript nós teremos o seguinte resultado:

O código ASCII ou Unicode da letra "A" é 65

JavaScript ::: Dicas & Truques ::: Tratamento de Erros

Como retornar o rastreio da pilha de um erro de tempo de execução em JavaScript usando a propriedade stack do objeto Error

Quantidade de visualizações: 7192 vezes

A propriedade stack do objeto Error da linguagem JavaScript pode ser usada quando queremos obter mais informações sobre as causas do aparecimento de um erro em tempo de execução. Dessa forma nós conseguimos rastrear o erro até a sua origem.

Veja um trecho de código JavaScript completo demonstrando o seu uso:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Estudos JavaScript</title>
</head>
<body>

<script language="javascript">
  // o trecho de código a seguir vai provocar
  // um erro de tempo de execução em JavaScript
  try{
    // y não foi definido
    var x = y;
  }
  catch(e){
    // mostra a pilha de rastreio do erro
    document.write("Rastreio da pilha: " + e.stack);
  } 
</script>
  
</body>
</html>

Ao executar este código JavaScript nós teremos o seguinte resultado:

Rastreio da pilha: ReferenceError: y is not defined at http://localhost/estudos/estudos_js.html:13:13

JavaScript ::: Dicas & Truques ::: Mouse e Teclado

Como bloquear o botão direito do mouse em suas páginas HTML usando JavaScript

Quantidade de visualizações: 2 vezes

Em algumas situações, principalmente games desenvolvidos em JavaScript ou HTML5, nós gostaríamos de evitar o botão direito do mouse, ou seja, o menu de contexto no corpo da página web.

Para isso só precisamos retornar false para o evento oncontextmenu. Veja como isso pode ser feito no trecho de código JavaScript abaixo:

----------------------------------------------------------------------
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>
</head>
 
<body oncontextmenu="return false">

<h1>Você não pode usar o botão direito nessa página</h1>

</body>
</html>

Uma boa idéia é avisar ao usuário (por meio de uma mensagem window.alert) que ele não pode usar o botão de contexto no documento HTML. Veja:

----------------------------------------------------------------------
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>
</head>
 
<body oncontextmenu="return aviso()">

<script type="text/javascript">
  function aviso(){
    window.alert("Botão direito não permitido.");
    return false;
  }
</script>

</body>
</html>

Agora, ao clicarmos com o botão direito do mouse na página, uma mensagem window.alert será exibida com o seguinte texto:

Botão direito não permitido.

Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Como testar se uma variável é do tipo string em JavaScript - Exercício Resolvido de JavaScript

Como testar se uma string está vazia em JavaScript - Exercício Resolvido de JavaScript

Como encontrar o menor valor em um array de inteiros em JavaScript - Exercícios Resolvidos de JavaScript

Ler três números inteiros e indicar se eles estão em ordem crescente ou decrescente - Exercícios Resolvidos de JavaScript

Como subtrair dois números em JavaScript - O operador de subtração da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Como multiplicar dois números em JavaScript - O operador de multiplicação da linguagem JavaScript - Exercício Resolvido de JavaScript

Como testar se o argumento de uma função JavaScript é do tipo String - Exercícios Resolvidos de JavaScript

Como somar dois números em JavaScript - O operador de adição da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Como calcular o seno de um número ou ângulo em JavaScript usando a função sin() do objeto Math

Como adicionar um método que faz um função auto repetir um determinado número de vezes

Como usar o método getElementById() do objeto document para localizar um elemento HTML baseado em seu id usando JavaScript

Exercício Resolvido de JavaScript - Como subtrair dois números em JavaScript - O operador de subtração da linguagem JavaScript

Como construir uma determinada data e hora usando o construtor do objeto Date do JavaScript

Como exibir um número usando uma precisão de 4 dígitos

Como testar se uma string é um valor númerico válido

Como calcular a norma ou módulo de vetores nos espaços R2 e R3 usando JavaScript - Geometria Analítica e Álgebra Linear usando JavaScript

Como remover elementos duplicados de um array em JavaScript usando um Set e o método Array.from()

Remover espaços no início de uma string

Dicas e truques de outras linguagens

C++ - Como contar as frequências de palavras em uma frase ou texto em C++ usando um unordered_map

PHP - PHP para iniciantes - Como testar se uma variável é do tipo string usando a função is_string() do PHP

Java - Programação orientada a objetos em Java - Como usar o modificador protected em suas variáveis e métodos Java

Python - Python para iniciantes - Como inserir itens em posições específicas de uma lista usando o método insert()

C# - Como ordenar um array de strings em ordem alfabética em C# usando a classe StringComparer

C# - Como retornar o tamanho de uma string em C# usando a propriedade Length

Java - Java Collections - Como usar a interface Set em seus códigos Java

C++ - Exercício Resolvido de C++ - Uma função C++ que recebe um valor inteiro e informa se o mesmo é um número primo

C - Como abrir ou criar arquivos em C usando a função fopen()

Python - E-Book 650 Dicas, Truques e _Exercícios Resolvidos_ de Python - PDF com 1.200 páginas

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e Fornecedores

Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais

Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Você está aqui: JavaScript ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Navegação e Pesquisa de Nós (Nodes)

Usando childNodes para retornar uma coleção de nós filhos de um determinado elemento HTML

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como retornar o código ASCII ou Unicode associado a um caractere em JavaScript usando a função charCodeAt()

JavaScript ::: Dicas & Truques ::: Tratamento de Erros

Como retornar o rastreio da pilha de um erro de tempo de execução em JavaScript usando a propriedade stack do objeto Error

JavaScript ::: Dicas & Truques ::: Mouse e Teclado

Como bloquear o botão direito do mouse em suas páginas HTML usando JavaScript

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 350 Exercícios Resolvidos de Java - Com comentários em Português

PDF COM 500 PÁGINAS

Apenas R$ 19,90