Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida em relação ao "document.querySelector"

Na aula temos a seguinte classe:

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);
        this.inputData = $('#data');
        this.inputQuantidade = $('#quantidade');
        this.inputValor = $('#valor');

    }

    adiciona(event) {

        event.preventDefault();

        console.log(this.inputData.value);
        console.log(this.inputQuantidade.value);
        console.log(this.inputValor.value);
    }
}

Minha duvida é: O que por exemplo " $('#data');" guarda no "this.inputData"? É a posição de onde fica esse trecho de html no DOM? Pois parece que ele só guarda a busca e para buscar o valor, ele varre tudo de novo.

4 respostas
solução!

Respondendo a sua pergunta. Quando você faz $('#data ') esta varrendo a árvore DOM de elementos da página e buscando o elemento que possui o ID data. Daí, para evitar ter que ficar buscando toda vez o elemento ele é guardado na propriedade this.inputData. Veja que essa propriedade não é o valor da data que você digitou, mas um ponteiro para o elemento do DOM que sabe te dizer esse valor toda vez que você fizer this.inputData.value.

É por isso que no método adiciona você faz this.inputData.value para saber sempre o valor atual do elemento que foi digitado (perceba que você já tem o elemento do DOM, não precisa ficar buscando o elemento toda hora). Se você tivesse feito indevidamente:

    this.inputData = $('#data').value;

Estaria guardando o valor digitado na propriedade this.inputData. Sendo assim, no seu método adiciona não seria mais capaz de saber qual é o valor atual digitado no campo de data no momento de adicionar uma nova negociação. Além disso, o valor this.inputData não seria um elemento do DOM e logo você não poderia fazer this.inputData.value.

Era essa a sua dúvida? No aguardo para saber se esta tudo certinho.

Só um detalhe, você já conferiu esse treinamento https://www.alura.com.br/curso-online-a-linguagem-javascript

Nele você pega as bases para entender melhor, por exemplo, a questão que você me perguntou. É que este treinamento tem como pré-requisito que o aluno já tenha conhecimento da linguagem.

Depois confere lá. Se já dominar o assunto daquele curso, beleza, só continuar comigo aqui até o fim.

Sucesso e bom estudo.

Já domino JS essa sim. To conseguindo acompanhar tranquilamente. Fui seu aluno na Caelum, foi você que me recomendou este curso.

Oi Fernando! Lembrei! Prepare-se que ainda tem dois cursos pela frente. Sucesso e bom estudo!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software