Exemplo setAttribute | JavaScript: manipulando elementos no DOM

1
resposta

por Estudante

| 65.5k xp | 52 posts

[...] O método setAttribute é usado para definir ou modificar o valor de um atributo em um elemento HTML. Ele aceita dois argumentos: o primeiro é o nome do atributo que queremos definir ou modificar, e o segundo é o valor que queremos atribuir a esse atributo. Se o atributo já existir, o método setAttribute irá sobrescrevê-lo; caso contrário, ele criará um novo atributo. Por exemplo:

// HTML: <p id="meuParagrafo">Texto inicial</p>

const paragrafo = document.getElementById('meuParagrafo');
paragrafo.setAttribute('id', 'paragrafoModificado');
paragrafo.setAttribute('data-novo-atributo', 'Novo valor');

Após a execução deste código, o parágrafo terá seu ID alterado para "paragrafoModificado" e será adicionado um novo atributo data-novo-atributo com o valor "Novo valor".

Prezades, fiquei confuso com a explicação desse "para saber mais"

Após a execução o trecho do HTML seria:

<p id="paragrafoModificado" data-novo-atributo = "Novo valor">Texto inicial</p>

É isso mesmo?

1 resposta

por Lorena Garcia

| 8372k xp | 12222 posts

Alura Scuba Team Suporte Educacional

12/01/2024

Oi, tudo bem?

Você entendeu perfeitamente a função do método setAttribute em JavaScript.

Sim, após a execução do código que você mencionou, o HTML do parágrafo ficará assim:

<p id="paragrafoModificado" data-novo-atributo="Novo valor">Texto inicial</p>

Isso acontece porque o método setAttribute foi usado para modificar o valor do atributo id do parágrafo e para adicionar um novo atributo data-novo-atributo.

O método setAttribute é bem útil quando queremos alterar ou adicionar atributos a um elemento HTML. Ele aceita dois argumentos: o nome do atributo que queremos definir ou modificar (no seu exemplo, 'id' e 'data-novo-atributo'), e o valor que queremos atribuir a esse atributo (no seu exemplo, 'paragrafoModificado' e 'Novo valor').

Espero ter ajudado.

Um abraço e bons estudos.