 |
Accediendo a una marca HTML a través del DOM (getElementById)
El método getElementById permite, como su nombre indica, seleccionar un elemento del documento por medio del valor del atributo id que se le haya asignado. Devuelve nulo si no existe ningún elemento con el ID especificado. La identificación debe ser única dentro de una página. Sin embargo, si existe más de un elemento con el ID especificado, el método getElementById () devuelve el primer elemento en el código fuente.
Su sintaxis es la siguiente:
document.getElementById("nombre del Id de la marca HTML")
- elementID El valor del atributo ID del elemento que desea obtener es del tipo cadena y es obligatorio.
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Try it</button><script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hola Gente";
}
</script>
</body>
</html>
La primera función que nos provee el DOM a través del objeto document es:
document.getElementById("nombre del Id de la marca HTML")
Nos retorna una referencia a la marca en sí misma. Con esta referencia podemos acceder a sus propiedades como puede ser su contenido, color, fuente, etc. A esta función la emplearemos constantemente durante el curso.
Para disponer un ejemplo muy sencillo dispondremos una marca <h1> en la página y luego por medio de dos botones cambiaremos su color, y su tamaño de fuente.
El archivo html es el siguiente:
<!DOCTYPE html> <html> <head> <title>Problema</title> <script src="func3.js"></script> <link rel="StyleSheet" href="estilos3.css" type="text/css"> </head> <body> <h1 id="titulo">Este es un título dinámico</h1> <input type="button" value="Cambiar Color" onClick="cambiarColor()"> <input type="button" value="Cambiar Tamaño de Fuente" onClick="cambiarTamanoFuente()"> </body> </html>
Es importante notar que a los eventos para los dos botones los definimos en un archivo separado llamado funciones.js que lo incluimos con el siguiente código:
<script src="func3.js"></script>
A la hoja de estilo también la definimos en un archivo separado que la incluimos con el siguiente código:
<link rel="StyleSheet" href="estilos3.css" type="text/css">
Para poder acceder a la marca h1 debemos definir la propiedad id:
<h1 id="titulo">Este es un título dinámico</h1>
Para capturar los eventos de los dos botones inicializamos la propiedad onclick de cada botón:
<input type="button" value="Cambiar Color" onClick="cambiarColor()">
Por otro lado definimos el archivo estilos3.css:
#titulo {
text-align:center;
}
#boton1,#boton2 {
text-align:center;
width:200px;
}
y el archivo func3.js:
function cambiarColor()
{
var tit=document.getElementById('titulo');
tit.style.color='#ff0000';
}
function cambiarTamanoFuente()
{
var tit=document.getElementById('titulo');
tit.style.fontSize=60;
}
Notemos que para recuperar una referencia a la marca h1 debemos indicar el siguiente código:
var tit=document.getElementById('titulo');
Ahora, en la varible tit tenemos una referencia a la marca h1 de la página.
Si queremos cambiar el color del texto debemos acceder a la propiedad style y de ésta a la propiedad color:
tit.style.color='#ff0000';