Só posso usar

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Tarefa</title>
</head>

<body>
    <form class="calculadora">
        <button class="botao">Calcula</button>
        <input class="numero">
        <input class="tabuada">
        <span class="resultado"></span>
    </form>

    <script>
        function buscaElemento(seletor) {
            return document.querySelector(seletor);
        }

        function aplicaTabuada(numero, tabuada) {
            return numero * tabuada;
        }

        var botao = buscaElemento('.botao');
        var numero = buscaElemento('.numero');
        var tabuada = buscaElemento('.tabuada');
        var resultado = buscaElemento('.resultado');


        botao.addEventListener('click', function(event) {
            resultado.textContent = aplicaTabuada(numero.value, tabuada.value);

            var calculadora = document.querySelector(".calculadora");
            event.preventDefault();
            calculadora.reset();
        });
    </script>

</body>

</html>

Eu quis adicionar um reset após o botão ter sido clicado, mas reparei que ele só funciona quando os elementos à serem resetados estão dentro de um form. Tentei com section e div, mantendo a mesma classe "calculadora", no entanto recebo o erro "calculadora.reset is not a function".

Gostaria de saber o motivo.