Conceptos de DHTML

El primer método que nos provee el DOM a través del objeto document es:

document.getElementById("nombre del Id del elemento HTML")

Nos retorna una referencia a la etiqueta en sí misma. Con esta referencia podemos acceder a sus propiedades como puede ser su contenido, color, fuente, etc. A este método lo emplearemos constantemente durante el curso.

Para disponer un ejemplo muy sencillo dispondremos un elemento <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 lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.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()">
    <script src="funciones.js"></script>
</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="funciones.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="estilos.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 (más adelante veremos que hay otros métodos para acceder a los eventos de los objetos que se definen directamente en el archivo JavaScript sin tener que llamar desde HTML a las funciones):

<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() {
    let tit = document.getElementById('titulo')
    tit.style.color = '#ff0000'
}

function cambiarTamanoFuente() {
    let tit = document.getElementById('titulo')
    tit.style.fontSize = '60px'
}

Notemos que para recuperar una referencia a la etiqueta h1 debemos indicar el siguiente código:

    let 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):

    let tit = document.getElementById('titulo')
    tit.style.fontSize = '60px'

Acotaciones

En muchas situaciones podemos implementar un código más conciso sin tener que almacenar en una variable la referencia a la etiqueta:

function cambiarColor() {
    document.getElementById('titulo').style.color = '#ff0000'
}

function cambiarTamanoFuente() {
    document.getElementById('titulo').style.fontSize = '60px'
}

3 - Accediendo a un elemento HTML a través del DOM (getElementById)

Acotaciones

Retornar