1
resposta

[Sugestão] Manipulação do DOM para capturar valores do arquivo HTML com JavaScript

qual seria melhor para usar

1 - document.querySelector("#titulo").innerHTML = "Título Modificado com JavaScript!";

ou o que instrutor disse...

me explique

ou não teria diferença alguma.

1 resposta

Bom dia, Lais!

Tudo bom?!

Por gentileza, poderia me dizer qual outra abordagem o instrutor sugeriu ao modificar o conteúdo do elemento?

Sobre a 1° opção acima (document.querySelector("#titulo").innerHTML = "Título Modificado com JavaScript!";) é uma opção comum para selecionar e modificar conteúdo de um elemento dinamicamente com JS, onde o innerHTML permite a inserção de tags HTML no conteúdo como exemplo abaixo:

document.querySelector(".titulo").innerHTML = "<strong>Título Modificado com JS!</strong>";

Outra opção é utilizando o textContent para a saída do conteúdo. Diferente do innerHTML o textContent não interpreta html, somente texto, o que impossibilita o uso de tags no conteúdo, como no exemplo abaixo:

document.querySelector(".titulo").textContent = "Título Modificado com JS!";

Quando usar innerHTML e textContent?

Usamos inner quando precisamos inserir e modificar conteúdo html dinâmico e de forma segura, onde o conteúdo ali é seguro, mas se o conteúdo não for devidamente sanitizado, fica suscetível a ataques de XSS.

Usamos text quando tratamos apenas o conteúdo, sem a necessidade de modificar/incluir html, todo o conteúdo é trato como texto.

Espero ter ajudado! Qualquer dúvida, estou a disposição!