1

Fiz uma função pra mudar uma foto quando um elemento for adicionado na minha tabela, tabela essa que criei uma classe para conseguir mudar a foto, mas para pegar o elemento do html, preciso usar o querySelector, porém nao estou conseguindo com classe, mas quando é com id ele vai.

Ex.:

function teste() {
  var elemento = document.querySelector('info-status');

    var conteudo = elemento.textContent || elemento.innerText;

    var teste = conteudo.length;

    if (teste > 0) {

      var img = document.getElementById('TrocaPost');
      var imgg = document.getElementById('TrocaEntregue');
      var image = document.getElementById('TrocaViagem');
      img.src = 'caminhao/caminhaoCERTOazul.png';
      imgg.src = 'caminhao/caminhaoCERTOazul.png';
      image.src = 'caminhao/caminhaoCERTOazul.png';

    }
}

o info-status quando é id, ele pega, mas quando é classe ele nao pega. Existe algo de errado com meu código ou o querySelector só pega ID?

3

1 Resposta 1

5

Boa tarde!

O querySelector consegue capturar qualquer elemento da DOM. Imagina que a sintaxe do seletor é bem próxima do CSS.

Segue exemplo prático abaixo:

HTML:

var divElement = document.getElementById('div');
var buttonElementId = document.querySelector('button#buttonSquareID');
var buttonElementClass = document.querySelector('button.buttonSquareClass');

// por ID utliliza-se o "#"
buttonElementId.onclick = function () {
    let newSquareElement = document.createElement('div');
    newSquareElement.textContent = 'Utilizando ID';
    divElement.appendChild(newSquareElement);
}

// por Class utliliza-se o "."
buttonElementClass.onclick = function () {
    let newSquareElement = document.createElement('div');
    newSquareElement.textContent = 'Utilizando Class';
    divElement.appendChild(newSquareElement);
}
<!DOCTYPE html>
<html>

<head>
    <title>SQUARE</title>
</head>

<body>
    <div id="div">
        <button id="buttonSquareID"> Create text using ID </button>
        <button class="buttonSquareClass"> Create text using Class </button>
    </div>
</body>

</html>

Espero que tenha ajudado. Abraços

2
  • 1
    Valeria ressaltar que este método devolve apenas o primeiro elemento que se encaixa no critério Commented 23/08/2019 às 18:01
  • Muito boa observação Lauro! Commented 23/08/2019 às 19:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .