Isso sempre dá nó na cabeça de muita gente, que tem que usar a linguagem Javascript pura (sem ajuda de frameworks, como o famoso JQuery):
getElementById: O mais usado de todos, essa função recupera um elemento do HTML buscada pela propriedade "id" (que deve ser único em uma página HTML):
<!DOCTYPE html>
<html>
<head><title>Teste</title></head>
<body>
<div id="teste_div">Teste de ID</div>
<script>
alert(document.getElementById("teste_div").innerHTML);
</script>
</body>
</html>
getElementsByName: Obtém um vetor de elementos que possuem um mesmo valor na propriedade "name":
<!DOCTYPE html>
<html>
<head><title>Teste</title></head>
<body>
<form name="teste_form" action="#" method="get">
<input type="text" name="texto" maxlength="50" value="Alô"/>
<input type="text" name="texto" maxlength="50" value="Mamãe"/>
<input type="submit" name="submit" value="Enviar"/>
</form>
<script>
var inputTexts = document.getElementsByName("texto");
for (var i =0; i < inputTexts.length; i++) {
alert(inputTexts[i].value);
}
</script>
</body>
</html>
getElementsByTagName: Obtém um vetor de elementos que possuem a mesma tag ("div", "input", "p", etc... -- só lembrando: este "etc" no final não é tag :P ):
<!DOCTYPE html>
<html>
<head><title>Teste</title></head>
<body>
<form name="teste_form" action="#" method="get">
<input type="text" name="texto" maxlength="50" value="Alô"/>
<input type="text" name="texto" maxlength="50" value="Mamãe"/>
<input type="submit" name="submit" value="Enviar"/>
</form>
<script>
var inputTexts = document.getElementsByTagName("input");
for (var i =0; i < inputTexts.length; i++) {
alert(inputTexts[i].value);
}
</script>
</body>
</html>
getElementsByClassName: Esta função, que nem todo navegador suporta, obtém um vetor de elementos através da propriedade "class" destes:
<!DOCTYPE html>
<html>
<head><title>Teste</title></head>
<body>
<div id="teste_div" class="meu_estilo">Teste de Classe</div>
<script>
alert(document.getElementsByClassName("meu_estilo")[0].innerHTML);
</script>
</body>
</html>
Espero que isso ajude alguém...
Até mais!
Um comentário:
Muito obrigado, sua explicação ficou bem clara e objetiva!
Postar um comentário