2

tava criando um menu que tinha dois botoes, uma mostrasse aba de descricao e outra mostrasse aba da ficha tecnica.

criei uma funcao no javascript que ao clicar no botao o display de um seria none e outro block.

fiz o seguinte:

HTML

<button onclick='funcao("tec","des")'>Descricao</button>
<button onclick='funcao("des","tec")'>Tecnico</button>


<div class="des">
   <p>
      Isso eh uma descricao
   </p>
</div>

<div class="tec">
   <p>
      isso eh uma ficha tecnica
   </p>
</div>

JAVASCRIPT

function funcao(desaparece, aparece){
var desa, apar;

desa = document.getElementsByClassName(desaparece);
apar = document.getElementsByClassName(aparece);

desa.style.display = 'none';
apar.style.display = 'block';
}

mas nao estava funcionando pesquisei um pouco fiz outra funcao:

function funcao(desaparece, aparece){
     var desa, apar;

     desa = document.getElementsByClassName(desaparece);
     apar = document.getElementsByClassName(aparece);

     for (i = 0; i < desa.length; i++) {
         desa[i].style.display = "none";
     }

     for (i = 0; i < apar.length; i++) {
         apar[i].style.display = "block";
     }
}

e esse funcionou , mas nao consigo entender porque um funcionou e outro nao.

1 Resposta 1

6

O getElementsByClassName retorna uma lista, isso está na documentação:

The getElementsByClassName(classNames) method, when invoked, must return the list of elements with class names classNames for this.

A call to document.getElementById("example").getElementsByClassName("aaa") would return a HTMLCollection.

Fonte: https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname

Sobre o HTMLCollection (o "array" retornado pelo getElementsByClassName), é especificado que:

  • collection . length:
    Returns the number of elements in the collection.
  • element = collection . item(index) or element = collection[index]:
    Returns the element with index index from the collection. The elements are sorted in tree order.
  • element = collection . namedItem(name) or element = collection[name]:
    Returns the first element with ID or name name from the collection.

Fonte: https://dom.spec.whatwg.org/#htmlcollection.


Sendo assim, sempre que utiliza o getElementsByClassName você vai obter um HTMLCollection, que é similar à uma lista, um array. Então, para acessar cada um dos items desta lista, você deve utilizar collection[index] ou collection.item(index).


No caso você não precisa utilizar o for já que existe apenas um único elemento. No caso de SÓ EXISTIR um único elemento com a classe, você poderia utilizar:

desa = document.getElementsByClassName(desaparece)[0];
apar = document.getElementsByClassName(aparece)[0];

O [0] irá obter o primeiro item de tal lista (do HTMLCollection). Entretanto, para casos gerais, assumindo que possa existir multiplos elementos com o a mesma classe você precisará utilizar o for (ou qualquer outra forma similar).

Isso foi o que você fez, e foi o que funcionou:

 for (i = 0; i < desa.length; i++) {
     desa[i].style.display = "none";
 }

 for (i = 0; i < apar.length; i++) {
     apar[i].style.display = "block";
 }

Dessa forma, primeiro você usa o desa.length/apar.length (que é o collection.length) para saber o seu limite, e obtem cada item usando o desa[i]/apar[i] (que é o collection[index]).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .