Tutorial de DHTML : Temarios

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:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
<link rel="StyleSheet" href="estilos.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 languaje="javascript" src="funciones.js" type="text/javascript"></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="estilos.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()">
<input type="button" value="Cambiar Tamaño de Fuente" 
onClick="cambiarTamanoFuente()">

Por otro lado definimos el archivo estilos.css:

#titulo {
  text-align:center;
}
#boton1,#boton2 {
  text-align:center;
  width:200px;
}

y el archivo funciones.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';

Es similar para cambiar la fuente del título (accedemos a la propiedad fontSize):

  var tit=document.getElementById('titulo');
  tit.style.fontSize=60;

3 - Accediendo a una marca HTML a través del DOM (getElementById)