Tag Archives: getElementsByClassName

getElementById, getElementsByTagName, getElementsByClassName en jQuery

8 oct

Una de las grandes ventajas que tenemos en jQuery es la facilidad en seleccionar un elemento, obtener sus atributos, modificar sus atributos, modificar su contenido, etc.

En JavaScript teníamos que hacerlo así:

<script type="text/javascript">

// Seleccionamos el div con id "capa"
document.getElementById("capa");

// Seleccionamos todos los div
document.getElementsByTagName("div");

// Seleccionamos todos los div con la clase "capa"
document.getElementsByClassName("capa");

</script>

Con la llegada de jQuery se simplifica muchísimo, lo podemos hacer así:

<script type="text/javascript">
$(document).ready(function(){

// Seleccionamos el div con id "capa"
$("#capa");

// Seleccionamos todos los div
$("div");

// Seleccionamos todos los div con la clase "capa"
$(".capa");

});
</script>

Una vez que ya sabemos como seleccionar un elemento y administrarlo, vamos a hacer alguna prueba muy simple:

<script type="text/javascript">
$(document).ready(function(){

// Mostramos en un alert el contenido de la capa con id "capa"
alert($("#capa").html());

// Cambiamos el contenido de la capa con clase "capa"
$(".capa").html("Probando, probando..");

});
</script>