Use querySelector para adicionar e remover nomes de classes de elementos

O DOM pode ser usado em documentos HTML para:

• alterar o conteúdo dos elementos HTML
• alterar os estilos CSS dos elementos HTML
• adicionar e excluir elementos HTML (nomes de classe)
• criar novos elementos HTML na página da web

Neste artigo, aprenderemos como usar o HTML DOM para adicionar e remover nomes de classe com JavaScript.

Usando querySelector

O querySelector O método é usado para selecionar o primeiro elemento que corresponde a um seletor CSS. Você pode usar o código a seguir, por exemplo, para selecionar um elemento com um determinado ID de container.

1

const mainElement = document.querySelector('#container');

Com querySelector, você também pode selecionar elementos com base em seus nomes de classe ou tag. Por exemplo, você pode usar o código a seguir para selecionar todos os elementos div que tenham um nome de classe de contents:

1

const theContent = document.querySelectorAll('div.contents');

Os trechos de código de amostra acima de cada um retornam um NodeList objeto que pode ser usado para modificar ou manipular os elementos que foram selecionados.

Adicionando um nome de classe

Existe algo chamado add método no classList propriedade. Isso pode ser usado para adicionar um nome de classe a um elemento. Se, por exemplo, você quiser adicionar um nome de classe firstClass para um elemento que tem o id firstIDvocê pode usar este código:

1

const myElement = document.querySelector('#firstId');

2

myElement.classList.add('firstClass');

Removendo um nome de classe

Assim como o método add, há também um método do classList propriedade que pode ser usada para remover um nome de classe de um elemento. É o remove método. Se, por exemplo, você deseja remover de um elemento, o nome da classe firstClass que foi adicionado a ele, você pode usar este código:

1

const myElement = document.querySelector('#firstId');

2

myElement.classList.remove('firstClass');

Exemplo de adição e remoção de nomes de classes com querySelector

Este é um miniprojeto que demonstra o uso querySelector para adicionar e remover nomes de classes de elementos.

No exemplo acima, começamos usando querySelector para obter referências ao textHead elemento e os dois botões (addButton e removeButton). Em seguida, adicionamos ouvintes de evento aos botões para que, ao serem clicados, usem o classList.add e classList.remove métodos para adicionar ou remover o style classe do textHead elemento.

Quando o style classe é adicionada ao textHead elemento clicando no Adicionar classe botão, ele mudará a cor do elemento para verde e dará um preenchimento de 10px, desde que você tenha definido uma classe CSS com essas propriedades. Quando o style classe é removida clicando no Remover Classe botão, a cor do texto retornará ao seu valor original e o preenchimento será removido.

Exemplo de adição e exclusão de elementos usando querySelector

Vejamos um projeto mais avançado para demonstrar como esse conceito é aplicado no mundo real. nós estaremos usando HTML, CSS e JavaScript para criar um aplicativo simples de lista de tarefas, onde os usuários podem adicionar e remover tarefas.

Os usuários podem adicionar tarefas à lista de tarefas deste projeto inserindo-as no campo de entrada e clicando no botão Adicionar tarefa botão. Quando uma tarefa é adicionada, ela aparece na lista de tarefas como um item de lista. Haverá um Excluir botão ao lado de cada item de tarefa para que os usuários possam retirá-lo da lista. Os usuários podem clicar em cada item, e isso desenha uma linha no item para indicar que uma tarefa foi concluída.

Este projeto usa querySelector algumas vezes: para encontrar o campo de entrada, para encontrar o Adicionar tarefa botão e para localizar o contêiner div para a lista de tarefas.

1

const newTaskInput = document.querySelector('#new-task');

2

const addTaskButton = document.querySelector('#add-task');

3

const taskList = document.querySelector('#task-list');

Mais tarde, usamos esses elementos de várias maneiras. Adicionamos um event listener ao botão:

1

addTaskButton.addEventListener('click', addTask);

Então, quando esse botão é clicado, obtemos o valor do novo campo de entrada da tarefa e adicionamos um novo elemento à lista de tarefas.

1

function addTask() {

2

3

  //get the value of the input field

4

  const newTask = newTaskInput.value;

5

6

  //if the new task string is not empty

7

  if (newTask) {

8

9

    //create a new list element

10

    const li = document.createElement('li');

11

12

    //give it the string value from the new task input

13

    li.textContent = newTask;

14

15

    //append it to the task list

16

    taskList.appendChild(li);

17

18

    //and clear the new task input field

19

    newTaskInput.value = '';

20

21

    //...

Projetos de prática para aprender querySelector

Existem várias maneiras de aplicar esse método ao criar aplicativos da Web. Abaixo estão alguns exemplos que eu recomendo trabalhar para praticar mais este conceito:

Menu de navegação responsivo

Você pode usar o querySelector para selecionar um elemento de botão ou ícone e adicionar um ouvinte de evento a ele. Isso alternará a exibição do menu de navegação quando um usuário clicar no botão ou ícone.

Validando a entrada do formulário do usuário

Use o querySelector para selecionar elementos de formulário e validar a entrada do usuário antes que o formulário seja enviado.

Criando Animações e Efeitos

Usar querySelector para selecionar elementos e aplicar transições ou animações CSS para poder criar animações de rolagem, efeitos de fade-in ou animações de alternância.

Conclusão

Neste artigo, estudamos como selecionar elementos, alterar elementos e adicionar ou remover nomes de classe de elementos usando o querySelector método. Agora você deve ser capaz de usar esse método com precisão. Tente implementar os projetos práticos para solidificar ainda mais seu conhecimento desse conceito.