GetElementByTagName: mudanças entre as edições

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
Linha 17: Linha 17:


O HTML é o mesmo anterior, então nem vou exibí-lo agora.''
O HTML é o mesmo anterior, então nem vou exibí-lo agora.''
'''JS'''
<pre>
function SomarValor(){
    valores = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
    total = 0;
    for(var i=0;i<valores.length;i++){
        total+=parseFloat(valores[i].innerHTML)
    }
    document.getElementById('total').innerHTML = total
}
</pre>

Edição das 10h29min de 7 de novembro de 2013

Usando getElementByTagName

getElementsBytagName

Se você notarem, no exemplo acima na função de remover o item eu usei o método getElementsByTagName.

Diferentemente do getElementById, com getElementsByTagName você não resernva um único elemento, mas todos os elementos que você quiser, exemplo, no exemplo acima eu reservei todas as uls, mas resolvi usar apenas à primeira.

Você pode se perguntar, mas se há apenas um elemento porque devo dizer qual eu quero, veja, isso é um padrão da linguagem e embora em principio pareça estranho, é bem útil se você pensar que seu código pode crescer e aoo invés de você ter uma ul, pode ter 300.

Dessa forma você tem que dizer ual elemento você quer 0, 1, 2, etc ou percorrer com um for por todos os elementos.


Vou usar o exemplo acima, mas vou mudar um pouco, digamos que esta é a lista do que você comprou, ou melhor, digamos que é a lista final do supermercado, precisamos obter o valor final desta lista, vamos lá.

O HTML é o mesmo anterior, então nem vou exibí-lo agora.


JS

function SomarValor(){
    valores = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
    total = 0;
    for(var i=0;i<valores.length;i++){
        total+=parseFloat(valores[i].innerHTML)
    }
    document.getElementById('total').innerHTML = total
}