getElementById

Lección 3 de 13 del curso Métodos del DOM de JavaScript de Coddy.

La función getElementById() recupera el primer elemento con un atributo id coincidente, por ejemplo:

const element = document.getElementById("elementId");

Lo anterior recupera el elemento con un id de elementId y lo guarda en una variable llamada element.

Ten en cuenta el prefijo document, este es el DOM del archivo HTML.

¡Después de recuperar un elemento, puedes manipularlo usando JavaScript!

La primera propiedad que aprenderemos es textContent, que contiene el contenido de texto del elemento. Puedes modificar el texto de esta manera:

const element = document.getElementById("elementId");
element.textContent = "some text";

Después de este código, el texto de #elementId será some text

Desafío

Fácil

Se te proporciona código HTML que contiene un encabezado con un ID.

Usando solo JavaScript, cambia el texto de este elemento a “Hello!”:

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <body>
        <h1 id="heading">Welcome!</h1>
        <script src="script.js"></script>
    </body>
</html>

Todas las lecciones de Métodos del DOM de JavaScript

1Introducción

2Métodos del DOM I

3Métodos del DOM II