dúvida querySelector

Seletores do DOM são maneiras de você obter elementos que compõem a página. Nesse caso em especial, todos os "button" da página seriam selecionados, mas há um só. Se você testar colocar mais de um botão na página, todos terão o mesmo comportamento.

Há milhões de maneiras de se fazer "queries" em busca de elementos: por sua classe, por seu id, por seu tipo, por sua posição etc. No início, seleção de elementos (muito badalado pelo jQuery) é um pesadelo, mas com o tempo e a experiência tudo fica bem natural.

Quando você encontra o elemento, a partir da função:

var button = document.querySelector("button");

e o atribui à variável button, ela passa a conter um (ou mais) elemento da página sob a forma de um objeto (sim, aquele da OO). Este objeto tem propriedades e métodos, como qualquer objeto. Uma dessas propriedades é o onclick, que armazena a função que será executada, como o nome sugere, quando este elemento for clicado. Lembre que em javascript uma função é um "cidadão de primeira classe" e, como tal, pode ser atribuído a uma variável.

Então, o resto é história:

button.onclick = verifica;

Ou, seja, quando o botão for pressionado, a função verifica será executada.

Tudo isso parece complicado a princípio, mas o português também é difícil, e mesmo assim a gente aprendeu a falar, né? :)

e em relação ao input?

var input = document.querySelector("input");

qual seria a explicação e o pq

Quando não há nada que determine que se trata de id, classe ou outro modificador, o que está no selector é considerado um elemento HTML. Então, neste se exemplo, este selector irá alcançar todos os elementos do tipo input do código, independente do que ele seja. Então, vê só o que ele encontra:

    <input type="button">
    <input type="checkbox">
    <input type="color">
    <input type="date">
    <input type="datetime-local">
    <input type="email">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="month">
    <input type="number">
    <input type="password">
    <input type="radio">
    <input type="range">
    <input type="reset">
    <input type="search">
    <input type="submit">
    <input type="tel">
    <input type="text">
    <input type="time">
    <input type="url">
    <input type="week">

Muita coisa, né? Agora, se você quiser selecionar apenas os campos text, por exemplo, o seu query seria o seguinte:

var texts = document.querySelector('input[type="text"]')

Tem documentação oficial e aprofundada falando só sobre selector. Mas só recomendo se você quiser virar especialista no assunto. Por enquanto, recomendo aprender a encontrar elementos usando o seu id (único na página) ou sua classe (pode haver vários elementos com uma mesma classe), usando os seletores # e ., respectivamente. Tipo isso:

<input id="input_nome" type="text" name="nome">

isto seria selecionado assim, ó:

var inp = document.querySelector('#input_nome')

Quando se tem um id no elemento, tudo fica mais fácil!

Qualquer dúvida, pergunta mais! Se resolveu, marca como resolvido que eu ganho ponto! :)

Obrigada!

você pode tirar dúvidas de outro tópico? kk

queria saber logo a resposta pra continuar os estudos

depois dar como solucionado https://cursos.alura.com.br/forum/topico-nao-funciona-alguem-pode-explicar-177876