Selecionando um elemento por ID – Acervo Lima Tutorials

Para obter um elemento por id, você usa o getElementById()método do Documentobjeto:

let element = document.getElementById(id);Linguagem de código:  JavaScript  ( javascript )

O método retorna um elemento cujo id corresponde a uma string especificada.

O idfaz distinção entre maiúsculas e minúsculas. Se nenhum elemento correspondente for encontrado, o método retornará null.

Como o idé suposto ser único, usar o getElementById()método é uma maneira rápida de selecionar um elemento.

Se o elemento não tiver um ID, você poderá usar querySelector()para localizar o elemento usando qualquer seletor CSS.

Veja o exemplo a seguir:

<html>
<head>
  <title>JavaScript getElementById() example</title>
</head>
<body>
  <h1 id="message">JavaScript getElementById() Demo</h1>
  <div id="btn">
    <button id="btnRed">Red</button>
    <button id="btnGreen">Green</button>
    <button id="btnBlue">Blue</button>
  </div>
  <script src="js/app.js"></script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

JavaScript

const changeColor = (newColor) => {
    const element = document.getElementById('message');
    element.style.color = newColor;
}

let div = document.getElementById('btn');

div.addEventListener('click', (event) => {
    let target = event.target;
    switch (target.id) {
        case 'btnRed':
            changeColor('red');
            break;
        case 'btnGreen':
            changeColor('green  ');
            break;
        case 'btnBlue':
            changeColor('blue');
            break;
    }
});Linguagem de código:  JavaScript  ( javascript )

Selecionando elementos por seletor CSS

Obtenha o pai de um elemento

Deixe um comentárioCancelar resposta