Limpar campos IDs

[EliasMaluco 0]

Tenho um formulario com varis IDs que recebem um texto pelo: document.getElementById('nome').innerHTML = nome não pode ser vazio...  
preciso de um script que percorra todo o formulário e limpe esses IDs. Alguem ajuda?

[Michael Granados 0]

Bom, como o próprio nome diz "ID" é a identidade única de um elemento no documento (página HMTL) então não deve haver mais de um. Dessa forma, alguns navegadores acabam escolhendo formas diferentes de trabalhar com o resgate dos elementos, geralmente resgatando o primeiro elemento da página. Portando o seguinte código:

 

<div>
  <div id="campo">Teste 1</div>
  <div id="campo">Teste 2</div>
</div>

<script>
  alert(document.getElementById('campo').innerHTML);
</script>

Irá exibir a caixa de alerta com o texto "Teste 1", deixando o outro elemento de lado.

 

Minha sugestão é tentar utilizar outro atributo para resgatar os elementos que você deseja alterar, como class ou data-* por exemplo.

 

Segue o exemplo:

 

<div>
  <div class="elemento">Texto 1</div>
  <div class="invalido">Texto 2</div>
  <div class="elemento">Texto 3</div>
</div>

<script>
  var elements = document.getElementsByTagName('div'); // resgatando todas as divs

  for(var i = 0, total = elements.length; i < total; i++) { // fazendo um loop/laço sobre todos os divs
    var element = elements[i]; // guarando a div do loop/laço na variavel element

    if (element.className === 'elemento') { // filtrando apenas os que tem a class (className em javascript) como 'elemento'
      alert(element.innerHTML);
 
    } // fechando o loop do if
  } // fechando o loop do for
</script>

No caso acima, você pode ver que ele irá trazer a caixa de alerta duas vezes, uma com o texto "Texto 1" e outra com o "Texto 3". Deixei os comentários no código para facilitar a compreensão, mas você pode remover se quiser... (na minha opinião, você deve remover pra forçar seus estudos).

 

Dá pra melhorar a performance ainda do código acima, mas não vem ao caso neste momento. Também recomendo dar uma olhada no querySelectorAll que faz a busca nos elementos através de chamadas parecidas com o CSS ou como a jQuery. Apesar de ser nativo no navegador e não precisar instalar biblioteca nenhum o querySelectorAll é relativamente novo, não sei quais navegadores você pretende atingir então recomendo ver na tabela do CanIUse antes ;-)

 

Espero que tenha ajudado, qualquer dúvida só gritar e bons estudos.

 

querySelectorAll - https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelectorAll

tabela do Can I Use - https://caniuse.com/#feat=queryselector

jQuery - http://jquery.com/

[EliasMaluco 0]

Em 08/05/2019 at 11:12, Michael Granados disse:

Bom, como o próprio nome diz "ID" é a identidade única de um elemento no documento (página HMTL) então não deve haver mais de um. Dessa forma, alguns navegadores acabam escolhendo formas diferentes de trabalhar com o resgate dos elementos, geralmente resgatando o primeiro elemento da página. Portando o seguinte código:

 

<div>
  <div id="campo">Teste 1</div>
  <div id="campo">Teste 2</div>
</div>

<script>
  alert(document.getElementById('campo').innerHTML);
</script>

Irá exibir a caixa de alerta com o texto "Teste 1", deixando o outro elemento de lado.

 

Minha sugestão é tentar utilizar outro atributo para resgatar os elementos que você deseja alterar, como class ou data-* por exemplo.

 

Segue o exemplo:

 

<div>
  <div class="elemento">Texto 1</div>
  <div class="invalido">Texto 2</div>
  <div class="elemento">Texto 3</div>
</div>

<script>
  var elements = document.getElementsByTagName('div'); // resgatando todas as divs

  for(var i = 0, total = elements.length; i < total; i++) { // fazendo um loop/laço sobre todos os divs
    var element = elements[i]; // guarando a div do loop/laço na variavel element

    if (element.className === 'elemento') { // filtrando apenas os que tem a class (className em javascript) como 'elemento'
      alert(element.innerHTML);
 
    } // fechando o loop do if
  } // fechando o loop do for
</script>

No caso acima, você pode ver que ele irá trazer a caixa de alerta duas vezes, uma com o texto "Texto 1" e outra com o "Texto 3". Deixei os comentários no código para facilitar a compreensão, mas você pode remover se quiser... (na minha opinião, você deve remover pra forçar seus estudos).

 

Dá pra melhorar a performance ainda do código acima, mas não vem ao caso neste momento. Também recomendo dar uma olhada no querySelectorAll que faz a busca nos elementos através de chamadas parecidas com o CSS ou como a jQuery. Apesar de ser nativo no navegador e não precisar instalar biblioteca nenhum o querySelectorAll é relativamente novo, não sei quais navegadores você pretende atingir então recomendo ver na tabela do CanIUse antes ;-)

 

Espero que tenha ajudado, qualquer dúvida só gritar e bons estudos.

 

querySelectorAll - https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelectorAll

tabela do Can I Use - https://caniuse.com/#feat=queryselector

jQuery - http://jquery.com/

 

Muito obrigado! modifiquei o código e resolvi meu problema. Valeu, mesmo!