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: 12808 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 ::: Web APIs (APIs Web) ::: MediaDevices Interface (Interface MediaDevices)

Como acessar as mídias do usuário em JavaScript usando a função getUserMedia() da interface MediaDevices

Quantidade de visualizações: 2578 vezes

O método getUserMedia() da interface MediaDevices nos permite acessar as entradas de mídias do usuários, tais como áudio e vídeo. Isso facilita o desenvolvimento de aplicações muito interessantes, a saber, tirar foto usando a webcam, gravar áudio a partir do microfone, gravar vídeo a partir da webcam, etc.

No entanto, antes de usar o MediaStream retornado pelo método getUserMedia(), é importante saber que o usuário deverá dar a sua permissão. Assim, sempre que o método getUserMedia() é chamado, uma janela de informação é mostrada para que o usuário concorde ou não em permitir o acesso às suas mídias.

Veja, por exemplo, como solicitar acesso à webcam/câmera do usuário:

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>A interface MediaDevices</title>
  
</head>
<body>

<script type="text/javascript">
  async function obterMediaUsuario(){
    // vamos obter o stream
    var stream = null;
    try{
      stream = await navigator.mediaDevices.getUserMedia({video: true});
      window.alert("A mídia para vídeo foi obtida com sucesso.");
      // agora podemos fazer algo com o stream aqui
    }
    catch(erro){
      window.alert("Houve um erro: " + erro);
    }  
  }
  
  // o browser suporta o MediaDevices?
  if(navigator.mediaDevices){
    obterMediaUsuario()
  }
  else{
    window.alert("O navegador não suporta o MediaDevices");  
  }
</script> 
  
</body>
</html>

Veja que usamos uma função assíncrona para getUserMedia(). Isso é necessário porque esta função retorna uma Promise que, em caso de sucesso, será convertida em um objeto MediaStream. Se o usuário não permitir o acesso, um erro do tipo NotAllowedError ou NotFoundError será retornado.

Alguns navegadores só permitem o uso do método getUserMedia() em ambiente seguro HTTPS ou localhost.

Em mais dicas dessa seção você verá como tirar proveito do MediaStream retornado pela função getUserMedia() e também como tratar melhor os erros retornados.

JavaScript ::: Fundamentos da Linguagem ::: Estruturas de Controle

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

Quantidade de visualizações: 7870 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 ::: Arrays e Matrix (Vetores e Matrizes)

Como adicionar um ou mais elementos ao início de um vetor JavaScript usando o método unshift() do objeto Array - [Revisado]

Quantidade de visualizações: 7041 vezes

O método unshift(), presente no JavaScript desde sua versão 1.2, é usado quando queremos adicionar um ou mais elementos no início de um vetor (array). Veja:

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

<script type="text/javascript">
  var valores = new Array(1, 2, 3, 4, 5);
  document.write("Valores no vetor: " + valores + "<br>");
  valores.unshift(6);
  document.write("Novos valores no vetor: " + valores);
</script>

Aqui nós adicionamos o valor 6 no início do vetor. Veja agora como adicionar três valores no início do vetor:

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

<script type="text/javascript">
  var valores = new Array(1, 2, 3, 4, 5);
  window.alert("Valores no vetor: " + valores);
  valores.unshift(6, 7, 8);
  window.alert("Novos valores no vetor: " + valores);
</script>

É importante observar que a função unshift() modifica o vetor original, e seu retorno é a nova quantidade de elementos no vetor.

Vamos testar seus conhecimentos em Ética e Legislação Profissional

A responsabilidade moral

O humano é um ser social e, para tal fim, estabelece valores e princípios como regras e normas de convivência para sua sobrevivência. Isso significa que:

A) o homem possui, em sua essência, a necessidade de interação com os outros seres da mesma espécie.

B) o ser humano precisa viver sozinho.

C) os animais não podem viver com humanos.

D) o ser humano não gosta de viver em sociedade.

E) humanos e animais não têm instinto.

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Ética e Legislação Profissional

A responsabilidade moral

A ética leva o homem a questionar constantemente suas ações e as atitudes alheias, tentando definir se elas são boas ou más, corretas ou incorretas. Na condição de disciplina, essa ciência se preocupa com a análise das ideias que envolvem a produção do bem e do mal, ou seja, dedica-se aos seus aspectos teóricos. Em tal perspectiva, pode-se afirmar que o conceito de ética se refere a:

A) quando o ser humano não pode falhar.

B) um conjunto de conhecimentos extraídos dos meios de comunicação.

C) um conjunto de conhecimentos extraídos da investigação do comportamento humano.

D) um conjunto de conhecimentos extraídos da investigação da moral.

E) quando o ser humano falha.

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Hidrologia

No que toca à extensão, qual bacia hidrográfica é considerada a maior bacia do mundo?

A) Bacia Amazônica.

B) Bacia Platina.

C) Bacia Chinesa.

D) Bacia do Rio Grande.

E) Bacia do Rio da Prata.

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira

Ações em estruturas: apresentação dos principais carregamentos na análise de estruturas convencionais

É exemplo de ação permanente direta:

A) Peso próprio da estrutura.

B) Vento.

C) Terremoto.

D) Deslocamentos de apoios.

E) Mobiliário.

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Python

Qual o resultado da execução do seguinte código Python?

soma = 0
for i in range(0, 10):
  soma = soma + 3
  if i > 4:
    break
  
print("A soma é: {0}".format(soma))

A) A soma é: 9

B) A soma é: 19

C) A soma é: 24

D) A soma é: 18

E) A soma é: 28

Verificar Resposta Estudar Cards Todas as Questões

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 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 multiplicar dois números em JavaScript - O operador de multiplicação da linguagem 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

Como testar se o argumento de uma função JavaScript é do tipo String - 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

Veja mais Dicas e truques de JavaScript

Como excluir a opção selecionada em um elemento HTML select

Como evitar clique e arraste em suas páginas

Como exibir os itens de um array em uma string separando-os com um espaço

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

Como retornar os milisegundos da data atual desde a meia-noite de 01/01/1970 em JavaScript usando as funções valueOf() e getTime() do objeto Date

Como retornar o ano com quatro dígitos em JavaScript usando a função getFullYear() do objeto Date - Datas e horas em JavaScript

Como calcular o cateto oposto dadas as medidas da hipotenusa e do cateto adjascente em JavaScript

Como obter a quantidade de argumentos fornecidos a uma função

Como testar se todos os elementos de um array satisfazem uma condição em JavaScript usando a função every()

Como arredondar um valor numérico de ponto-flutuante para baixo

Dicas e truques de outras linguagens

C - Apostila C para iniciantes - Como escrever suas próprias funções em C

C# - Como retornar a data e hora da criação de um diretório em C# usando a função GetCreationTime() da classe Directory

C# - Como remover um elemento em uma determinada posição de uma List<T> do C# usando a função RemoveAt()

C - Como calcular o tempo de queda livre de um corpo dada a altura da queda e a aceleração da gravidade usando a linguagem C

Java - Como usar o gerenciador de layout GridBagLayout em suas aplicações Java Swing

C - Como calcular porcentagem em C - Como efetuar cálculos de porcentagem em C

Delphi - Como listar todos os arquivos de um diretório usando Delphi

Java - Java Swing Exemplo completo: Como usar um timer para atualizar a hora atual em uma JLabel

Delphi - Como usar a propriedade Bof para verificar se estamos no primeiro registro do TClientDataSet do Delphi

JavaScript - Como usar objetos Set em seus códigos JavaScript

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 ::: Web APIs (APIs Web) ::: MediaDevices Interface (Interface MediaDevices)

Como acessar as mídias do usuário em JavaScript usando a função getUserMedia() da interface MediaDevices

JavaScript ::: Fundamentos da Linguagem ::: Estruturas de Controle

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

JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes)

Como adicionar um ou mais elementos ao início de um vetor JavaScript usando o método unshift() do objeto Array - [Revisado]

Vamos testar seus conhecimentos em Ética e Legislação Profissional

Vamos testar seus conhecimentos em Ética e Legislação Profissional

Vamos testar seus conhecimentos em Hidrologia

Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira

Vamos testar seus conhecimentos em Python

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