A través del DOM (Document Object Model o Modelo de Objetos del Documento) podemos acceder a los diferentes elementos de una página y consultar sus propiedades, modificarlas...
document.getElementById
Partamos de un ejemplo sencillo (pegad el siguiente código dentro de la etiqueta BODY):
<p id="ejemplo">Contenido de ejemplo</p>
<script>
function verHTML(id) {
alert( document.getElementById(id).innerHTML );
}
function actualizarHTML(id) {
document.getElementById(id).innerHTML += " modificado"
}
verHTML("ejemplo");
actualizarHTML("ejemplo");
verHTML("ejemplo");
</script>Como vemos, accedemos al elemento con el identificador "ejemplo":
- Primero leemos su contenido
- Luego lo actualizamos
- Finalmente volvemos a leerlo (ya modificado)
Hay varias formas de acceder al contenido. Hasta ahora hemos visto document.getElementById, que nos permite acceder a un elemento a partir de su identificador, pero hay otras formas. Las más utilizadas son:
document.getElementsByTagName
Nos permite acceder a determinada etiqueta.
Accedamos, por ejemplo, a los párrafos. Vamos a numerarlos:
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<script>
function numerarParrafos(){
var parrafos = document.getElementsByTagName("P");
for (var i=0; i<parrafos.length; i++) {
parrafos[i].innerHTML += " "+i;
}
}
numerarParrafos();
</script>document.getElementsByTagName
Funciona como el ejemplo anterior (devuelve un Array). Esto es práctico, por ejemplo, para acceder a un conjunto de campos de formulario de tipo "radio". Estos campos comparten nombre (name):
<input type="radio" name="nombre" id="nombre-a" value="a" checked="checked" />
<input type="radio" name="nombre" id="nombre-b" value="b" />
<input type="radio" name="nombre" id="nombre-c" value="c" />document.getElementsByClassName
Nos permite acceder a los elementos que tienen determinada clase. Podríamos, por ejemplo, colorear los párrafos impares:
<p class="impar">Párrafo</p>
<p class="par">Párrafo</p>
<p class="impar">Párrafo</p>
<script>
function colorearParrafosImpares(){
var parrafos = document.getElementsByClassName("impar");
for (var i=0; i<parrafos.length; i++) {
parrafos[i].style.color = "red";
}
}
colorearParrafosImpares();
</script>Más información sobre cómo acceder a los elementos del documento