Por que alterar com javascript

Olá Diego, tudo bem?

Existem algumas situações em que é necessário modificarmos o HTML por meio do JavaScript e para isso, podemos utilizar o querySelector para buscar a referência do elemento que queremos modificar o conteúdo interno. Veja o exemplo a seguir:

Exemplo: Sistema de Calculadora de Média

• Objetivo:

Calcular a média de 4 notas, em que o usuário irá preencher 4 elementos <input> com cada uma das respectivas notas, para que o sistema pegue os valores dos 4 inputs, calcule e exiba a média por meio da tag <p> na página.

• Simulação do código:

Parte 1: coletar valores dos inputs preenchidos

var nota1 = document.getElementById("input1").value
var nota2 = document.getElementById("input2").value
var nota3 = document.getElementById("input3").value
var nota4 = document.getElementById("input4").value

Neste caso utilizei outra forma de coletar elementos no HTML, com o document.getElementById, mas poderia ser utilizado o querySelector nesse caso também.

Parte 2: calcular a media

var media = (nota1 + nota2 + nota3 + nota4) / 4

Parte 3: modificar o HTML e exibir o resultado na tela

var resultado = document.querySelector(".resultado")
resultado.textContent = media

O .resultado está representando a tag <p> que citei que temos o intuito de preencher.

Perceba que os valores dos inputs são preenchidos de acordo com o que o usuário digitar, ou seja, os valores são totalmente aleatórios! Sendo assim, é necessário que a média que foi calculada seja exibida de forma dinâmica no HTML e para isso precisamos do JavaScript!

Esse foi um dos mil casos que existem em que é necessário obrigatóriamente preenchermos o HTML por meio do JS ao invés de manualmente alterar o HTML.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!