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: 12843 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 ::: Fundamentos da Linguagem ::: Estruturas de Controle

Apostila de JavaScript - Como usar o laço for da linguagem JavaScript

Quantidade de visualizações: 7894 vezes

O laço for (também chamado de loop for ou laço para) é usado quando queremos repetir uma instrução ou um conjunto de instruções um determinado número de vezes. Este laço é composto de três partes: inicialização, teste de continuídade e incremento ou decremento da variável de controle. Veja:

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

for(inicialização; teste; incremento/decremento){
  instrução ou conjunto de instruções
}

Na parte da inicialização nós podemos inicializar a variável a ser usada para controlar a quantidade de repetições do laço. Na parte do teste de continuídade nós avaliamos uma condição boolean (verdadeiro/falso) para determinar se o laço deve ser interrompido ou continuar sua execução. Na parte de incremento/decremento nós incrementamos ou decrementamos o valor da variável de controle.

Veja um trecho de código no qual usamos o laço for para contar de 0 até 10:

----------------------------------------------------------------------
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>

<script type="text/javascript">
  for(var i = 0; i <= 10;  i++){
    document.write(i + "<br>");
  }  
</script>

</body>
</html>

Este código exibirá o seguinte resultado:

0
1
2
3
4
5
6
7
8
9
10

Veja que a condição de continuídade do laço é o valor da variável i menor ou igual a 10. Eis agora uma modificação deste código que conta de 10 até 0:

----------------------------------------------------------------------
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>

<script type="text/javascript">
  for(var i = 10; i >= 0;  i--){
    document.write(i + "<br>");
  }  
</script>

</body>
</html>

Agora o código exibirá o seguinte resultado:

10
9
8
7
6
5
4
3
2
1
0

Agora que já vimos um exemplo do uso deste laço, é importante saber quando e quantas vezes as três partes de um laço for são executadas:

a) A parte de inicialização é executada apenas uma vez, ou seja, na entrada da estrutura do laço.

b) O teste de continuídade é feito ANTES de cada repetição (iteração) do laço. Se o teste de continuída não resultar satisfatório já na primeira repetição, as instruções contidas no laço não serão executadas e o fluxo do código continuará após sua chave de fechamento.

c) A parte de incremento/decremento da variável de controle é feita DEPOIS de cada repetição do laço.

Com exceção do teste de continuídade, as demais partes de um laço for podem conter mais de uma instrução. Quando isso acontece nós as separamos usando vírgulas. Veja um exemplo:

----------------------------------------------------------------------
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>

<script type="text/javascript">
  for(var i = 0, j = 2; i <= 10;  i++, j = j + 3){
    document.write("i = " + i + "; j = " + j + "<br>");
  }  
</script>

</body>
</html>

Ao executar este código teremos o seguinte resultado:

i = 0; j = 2
i = 1; j = 5
i = 2; j = 8
i = 3; j = 11
i = 4; j = 14
i = 5; j = 17
i = 6; j = 20
i = 7; j = 23
i = 8; j = 26
i = 9; j = 29
i = 10; j = 32

Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6.

JavaScript ::: Dicas & Truques ::: Geometria, Trigonometria e Figuras Geométricas

Como testar se um ponto está dentro de um círculo em JavaScript - Desenvolvimento de Games com JavaScript

Quantidade de visualizações: 1482 vezes

Quando estamos trabalhando com computação gráfica, geometria e trigonometria ou desenvolvimento de jogos em JavaScript, é comum precisarmos verificar se um determinado ponto (uma coordenada x, y) está contido dentro de um círculo.

Para melhor entendimento, veja a imagem a seguir:

Veja que temos um círculo com raio igual a 115 e com centro nas coordenadas (x = 205; y = 166). Temos também dois pontos. O ponto vermelho está nas coordenadas (x = 140; y = 90) e o ponto azul está nas coordenadas (x = 330; y = 500.

Como podemos ver na imagem, o ponto vermelho está dentro do círculo, enquanto o ponto azul está fora. E nosso intenção nesta dica é escrever o código JavaScript que permite fazer essa verificação. Tenha em mente que está técnica é muito útil para o teste de colisões no desenvolvimento de games.

Veja o código completo para o exemplo:

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

<!doctype html>
<html>
<head>
  <title>Desenvolvimento de Games usando HTML5 e JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos declarar a classe Circulo
  class Circulo{
    constructor(xc, yc, raio){
      this.xc = xc; // x do centro
      this.yc = yc; // y do centro
      this.raio = raio; // raio do círculo
    }
  }
  
  // agora vamos declarar a classe Ponto
  class Ponto{
    constructor(x, y){
      this.x = x; // coordenada x
      this.y = y; // coordenada y	
    }
  }
  
  // vamos criar um objeto Circulo
  var c = new Circulo(90, 50, 115);
  // vamos criar um objeto Ponto
  var p = new Ponto(140, 90);
  
  // vamos verificar se o ponto está dentro do
  // círculo
  var dx = p.x - c.xc;
  var dy = p.y - c.yc;
  if((Math.pow(dx, 2) + Math.pow(dy, 2)) < Math.pow(c.raio, 2)){
    document.writeln("O ponto está dentro do círculo");  
  }
  else{
    document.writeln("O ponto NÃO está dentro do círculo");  
  }
</script>
  
</body>
</html>

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

O ponto está dentro do círculo.

Experimente com círculos de raios e coordenadas centrais diferentes e também com pontos em várias coordenadas e veja como os resultados são interessantes.

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

Como converter uma string em um valor inteiro em JavaScript usando a função parseInt()

Quantidade de visualizações: 26569 vezes

Nesta dica mostrarei como podemos usar a função parseInt() do JavaScript para transformar uma string em um valor inteiro. Esse procedimento é necessário quando estamos efetuando cálculos com valores vindos de campos de formulários.

Veja a página HTML completa para o exemplo:

----------------------------------------------------------------------
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 string1 = "110";
  var string2 = "Arquivo";
  var string3 = "65,54";
 
  document.write(parseInt(string1) + "<br>");
  document.write(parseInt(string2) + "<br>");
  document.write(parseInt(string3));  
</script>
  
</body>
</html>

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

110
NaN
65

Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

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

Como somar dois números em JavaScript - O operador de adição da linguagem 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 testar se o argumento de uma função JavaScript é do tipo String - Exercícios Resolvidos de JavaScript

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

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

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

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

Veja mais Dicas e truques de JavaScript

JavaScript para matemática - Como obter o menor entre dois ou mais valores numéricos usando a função min() do JavaScript

JavaScript para iniciantes - Como converter uma string em um valor numérico usando o método Number() do JavaScript

Como ocultar um input type file e usar um botão ou uma imagem para permitir que o usuário selecione o(s) arquivo(s)

Como remover o primeiro caractere de uma string em JavaScript usando a função slice()

Como adicionar elementos no início de um array JavaScript usando a função unshift() do objeto Array

Cookies em JavaScript - Como obter o valor de um cookie usando JavaScript

Como retornar a primeira palavra de uma string em JavaScript usando a função split()

Ocultar código JavaScript dos navegadores que não suportam a linguagem

Como codificar todos os componentes da URL de uma página

Validar CPF (sem pontos e hífen)

Dicas e truques de outras linguagens

Java - Como usar o método getMethods() da classe Class - Como listar todos os métodos de uma classe ou interface Java em tempo de execução - Revisado

Revit C# - Como pedir para o usuário selecionar vários elementos no Revit usando a função PickObjects() do objeto Selection da Revit C# API

Python - Exercícios Resolvidos de Python - Escreva um programa Python para mover todos os zeros para o final do vetor, sem alterar a ordem dos elementos já presentes no array

Java - Java MySQL - Como obter os tipos de dados suportados pelo MySQL e seus correspondentes JDBC usando o método getTypeInfo() da interface DatabaseMetaData

Ruby - Como retornar o tamanho de uma string em Ruby usando o método length da classe String

Python - Como converter pés em metros em Python - Conversão de medidas em Python - Pés para metros

Python - Exercício Resolvido de Python - Uma classe para representar uma pessoa, com os atributos privados de nome, data de nascimento e altura

Java - Exercícios Resolvidos de Java - Valor da diária, valor médio arrecadado com e sem promoção e o lucro ou prejuízo mensal de uma promoção em um hotel

VB.NET - Como calcular o cosseno de um ângulo em VB.NET usando a função Cos() da classe Math - Calculadora de cosseno em VB.NET

Python - Como calcular o arco cosseno de um número em Python usando o método acos() do módulo math

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: Delphi
6º lugar: C
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 ::: Fundamentos da Linguagem ::: Estruturas de Controle

Apostila de JavaScript - Como usar o laço for da linguagem JavaScript

JavaScript ::: Dicas & Truques ::: Geometria, Trigonometria e Figuras Geométricas

Como testar se um ponto está dentro de um círculo em JavaScript - Desenvolvimento de Games com JavaScript

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

Como converter uma string em um valor inteiro em JavaScript usando a função parseInt()

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 650 Dicas e Truques de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90