getElementById

Lição 3 de 13 do curso Métodos DOM do JavaScript da Coddy.

A função getElementById() recupera o primeiro elemento com um atributo id correspondente, por exemplo:

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

O código acima recupera o elemento com um id de elementId e o salva em uma variável chamada element.

Observe o prefixo document, este é o DOM do arquivo HTML.

Depois de recuperar um elemento, você pode manipulá-lo usando JavaScript!

A primeira propriedade que aprenderemos é textContent, que contém o conteúdo de texto do elemento. Você pode modificar o texto assim:

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

Após este código, o texto de #elementId será some text

Desafio

Fácil

Você recebeu um código HTML que contém um título com um ID.

Usando apenas JavaScript, altere o texto deste elemento para “Hello!”:

Experimente você mesmo

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

Todas as lições de Métodos DOM do JavaScript

1Introdução

2Métodos do DOM I

3Métodos do DOM II