getElementById: selección de etiquetas HTML

Título curso Aprende a programar (con Javascript)

getElementById: selección de etiquetas HTML

Ya hemos presentado el método getElementById en el apartado anterior. Vamos a ampliar un poco más sobre él, para entender mejor las posibilidades que nos ofrece, combinada con otras ‘funcionalidades’ que pone a nuestra disposición Javascript a través del DOM, como son los eventos o la propiedad innerHTML.

Para visualizarlo, mostramos un ejemplo en el cuadro de abajo.

<p id="modificar">Esto es un párrafo que modificaremos</p>
<p>Esto es un párrafo que permanecerá igual</p>
<input type="button" value="Cámbiame !" id="cambiar" />
<script>
var boton = document.getElementById("cambiar");
boton.onclick = change;
function change() {
 var textoCambiar = document.getElementById("modificar")
 textoCambiar.style.fontSize = "1.5em";
 textoCambiar.innerHTML = "He cambiado el texto y tamaño del párrafo";
 }
</script>

<p id="modificar">Esto es un párrafo que modificaremos</p>

<p>Esto es un párrafo que permanecerá igual</p>

var boton = document.getElementById("cambiar");

boton.onclick = change;

function change() {

var textoCambiar = document.getElementById("modificar")

textoCambiar.style.fontSize = "1.5em";

textoCambiar.innerHTML = "He cambiado el texto y tamaño del párrafo";

}

</script>

En él, hemos creado con HTML dos párrafos, identificando uno de ellos con el id=”modificar” (linea 1) y un botón, con el identificativo “cambiar” (linea 3)

Con Javascript, en la 1ª línea del script (linea 5), seleccionamos al botón por su identificativo ( getElementById="cambiar" ) y lo asociamos a un objeto ‘boton’.

En la 2ª (linea 6), vamos a capturar el evento ‘onclick‘, que como ya vimos, nos da la posibilidad de detectar el momento en que el usuario pincha ese botón, para ‘disparar’ unas determinadas acciones, en este caso llamar a la función change.

Nota: quizás te has dado cuenta que ésta era la segunda forma que vimos de asociar un evento a un elemento

¿Qué hace esa función?:

Vemos en su definición que selecciona el primer párrafo de forma similar a como hicimos con el botón: var textoCambiar = document.getElementById("modificar")
En la siguiente línea, le aplica a ese párrafo escogido que hemos asignado a la variable ‘textoCambiar’ un estilo de tamaño de fuente mayor utilizando la propiedad ‘style’ de ese elemento (recuerda el ejemplo que vimos en el apartado anterior utilizando esta misma sintaxis: «elemento.style.propiedad»)
En la siguiente línea cambiamos el texto de ese elemento con la propiedad ‘innerHTML’. En el siguiente sección explicaremos esta propiedad

Copia y pega este código en el editor online. Pincha en el botón y verás el resultado. Aunque es un ejemplo muy simple, nos puede dar una idea de la potencia que nos proporciona la combinación de JavaScript con el DOM.