Vanilla Javascript - #21 Propriedades e Atributos

Na aula de hoje trabalharemos com manipulação de propriedades e atributos dos elementos que compõe o DOM do nosso website.

Manipulando atributos e propriedades com JS

No corpo do nosso site vamos criar uma imagem com vários atributos:

<img
        src="cruzeiro.jpg"
        alt="cruzeiro"
        title="fox"
        id="cruzeiro"
        class="cFox"
        data-info="this is an image"
>

Para manipular esses atributos, primeiramente selecionamos o elemento através do querySelector e posteriormente editamos suas propriedades.

(function readyJS(win,doc){
    'use strict';

    let body=doc.querySelector("body");
    body.style.backgroundColor="blue";

    let image=doc.querySelector("#cruzeiro");
    console.log(image.className);
    console.log(image.dataset.info);

    console.log(image.attributes);
    console.log(image.hasAttribute("data-info"));
    console.log(image.getAttribute("data-info"));
    console.log(image.setAttribute("data-color","pink"));
})(window, document);

Repare que no código acima, utilizamos dataset para atributos genéricos data-*. Nós ainda utilizamos a propriedade attributes e os métodos hasAttribute que verifica se existe aquele atributo, getAttribute que retorna o valor do atributo e setAttribute que seta um atributo.

Além de setar atributos e propriedades, podemos também remover atributos. Para isso, utilizamos o método remove.

image.removeAttribute("id");

Por hoje é só. Sucesso nos códigos e na vida!