Oi Matheus, tudo bem?
Desculpe a demora em te responder!
Há várias maneiras de escrever o código de uma mesma função e a opção que você apresentou pode ser uma delas para realizar a busca dos vídeos.
A instrutora Mônica realiza a função de busca por meio de um laço de repetição (while
) e coloca como condição lista.firstChild
para verificar se há um primeiro elemento dentro da lista que foi informada, se essa condição for verdadeira então será executada a função dentro das chaves (lista.removeChildren(lista.firstChild)
) que faz com que seja removido dessa lista o primeiro elemento e isso vai se repetir até que não tenha mais nenhum elemento na lista.
O método que você sugeriu, utiliza o replaceChildren()
, que realiza a substituição dos elementos da lista atual por um novo conjunto especificado através da palavra-chave que será pesquisada. Nesta opção não precisamos criar o laço de repetição e podemos apenas inserir como você bem colocou a linha de código:
lista.replaceChildren()
Portanto, as duas opções executam operações diferentes que levam a um mesmo resultado e você pode decidir qual das duas utilizar em seu projeto. Contudo, é importante reforçar como cada um dos comandos atua: no laço de repetição apagamos todos os dados da lista para reescrevê-los depois e ao utilizar o replaceChildren()
substituímos os valores e reescrevemos a lista baseados no valor pesquisado.
O código completo com as alterações poderia ser escrito da seguinte maneira:
async function buscarVideo(evento){
evento.preventDefault();
const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
const busca = await conectaApi.buscaVideo(dadosDePesquisa);
const lista = document.querySelector("[data-lista]");
lista.replaceChildren();
busca.forEach(elemento => lista.appendChild(
constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
if (busca.length == 0) {
lista.innerHTML = `<h2 class="mensagem__titulo">Não há vídeos com essa palavra</h2>`
}
}
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição!
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!