document.querySelector não funciona

Boa noite, estou tendo problemas com o document.querySelector, simplesmente não funcionou, retorna Null mesmo tendo valor nos inputs.

var campos = [
    document.querySelector('#data'),
    document.querySelector('#quantidade'),
    document.querySelector('#valor')
];

console.log(campos);

alert(document.querySelector('#quantidade'));

<form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" />
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0"  />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

De acordo com o exemplo da aula, o console do navegador deve mostrar o array campos assim: [input#data.form-control, input#quantidade.form-control, input#valor.form-control]

porém, no meu caso, o console esta mostrando assim: [null, null, null]