Console Error "Uncaught TypeError: Can not read property 'getAttribute' of null" [duplicate]

const TypeWriter = function(txtElemente, words, wait = 2000) {
 this.txtElemente = txtElemente;
 this.words = words;
 this.txt = "";
 this.wordIndex = 0;
 this.wait = parseInt(wait, 10);
 this.type();
 this.isDeleting = false;
} 

// Type Method
TypeWriter.prototype.type = function() {
 console.log("hello");
 setTimeout(() => this.type(), 500);
}

//Init On Dom Load
document.addEventListener ("DOMContentLoaded", init)

//Init App
function init() {
    const txtElemente = document.querySelector(".txt-type");
    const words = JSON.parse(txtElemente.getAttribute("data-words"));
    const wait = txtElemente.getAttribute("data-wait");

    // Init Typer Writer
    new TypeWriter(txtElemente, words, wait);
}

<header>
    <div class="header">
        <div class="contenedor">
            <img src="fotos/naet-logo.png" alt="logo" class="logo">
            <div class="menu-icon">
                <i class="fas fa-bars" style="color: black"></i>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="#">Inicio</a>
                    </li>
                    <li>
                        <a href="pagina1.html">Acerca</a>
                    </li>
                    <li>
                        <a href="#">Contacto</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

</header>
<div class="fondo-jumbo">
    <div id="contenedor-typer">
        <p class="naet-queretaro-naet">Naet</p>

        <p class="naet-queretaro-queretaro">Querétaro
            <span id="typer1" data-wait="2000" data-words='["Magico","Increible","Perfecto","Sensacional"]'></span>
        </p>
    </div>
    <center>
        <p class="jumbo-flecha">
            <a href="#page-one">

            </a>
        </p>
    </center>
</div>
<div class="rectangulo-cuerpo ">
    <div class="rectangulo-blanco ">
    </div>
</div>

<section class="index-z">
    <div class="rectangulo-abajo uno ">
        <div class="linea1 uno1 ">
            <div class="columna1 uno2 ">

                <div class="caja1 uno3 ">
                    <div class="titulo2 uno4 ">
                        <i class="fab fa-pagelines " style="font-size:43px;color:white "></i>
                        <h2>Natural</h2>
                    </div>
                    <div class="price1 uno5 ">
                        <h2>

                        </h2>
                    </div>
                    <div class="option uno6 ">
                        <ul>
                            <li>
                                <i class="fas fa-leaf " style="font-size:18px;color:white "></i>
                                <p>tecnica de desensibilización natural de las alergias</p>
                            </li>
                            <p class="movimiento-flecha ">
                                <i class="fas fa-level-down-alt " style="font-size:18px;color:white "></i>
                            </p>
                        </ul>
                        <div id="page-one">
                            <a href="" class="acerca-link">
                                <img src="fotos/logo-claro5.png " alt=" " width="70 " class="imagen-blanca ">
                        </div>
                    </div>
                    </a>
                </div>
            </div>

        </div>
    </div>
    </div>
    <div class="rectangulo-abajo dos ">
        <div class="linea1 dos1 ">
            <div class="columna1 dos2 ">
                <div class="caja1 dos3 ">
                    <div class="titulo1 dos4 ">
                        <i class="far fa-thumbs-up " style="font-size:40px;color:white "></i>
                        <h2>Permanente</h2>
                    </div>
                    <div class="price1 dos5 ">
                        <h2>

                        </h2>
                    </div>
                    <div class="option dos6 ">
                        <ul>
                            <li>
                                <i class="fas fa-leaf " style="font-size:18px;color:white "></i>
                                <p>Todos resultados positivos son permanentes</p>
                            </li>
                            <p class="movimiento-flecha ">
                                <i class="fas fa-level-down-alt " style="font-size:18px;color:white "></i>
                            </p>
                        </ul>
                        <a href=" " class="link-acerca ">
                            <img src="fotos/logo-claro5.png " alt=" " width="70 " class="imagen-blanca "> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="rectangulo-abajo tres ">
        <div class="linea1 tres1 ">
            <div class="columna1 tres2 ">
                <div class="caja1 tres3 ">
                    <div class="titulo1 tres4 ">
                        <i class="fas fa-check " style="font-size:40px;color:white "></i>
                        <h2>Eficiente</h2>
                    </div>
                    <div class="price1 tres5 ">
                        <h2>

                        </h2>
                    </div>
                    <div class="option tres6 ">
                        <ul>
                            <li>
                                <i class="fas fa-leaf " style="font-size:18px;color:white ">

                                </i>
                                <p>Todos tus problemas de salud resueltos naturalmente</p>
                            </li>
                            <p class="movimiento-flecha ">
                                <i class="fas fa-level-down-alt " style="font-size:18px;color:white "></i>
                            </p>
                        </ul>
                        <div id="acerca-link">
                            <a href="#acerca-link">
                                <img src="fotos/logo-claro5.png " alt=" " width="70 " class="imagen-blanca ">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </a>
</section>

<footer>
    <p>
        <b>Naet reconocido Internacionalmente </b>
        <i class="fas fa-globe"></i>
    </p>
</footer>

<div class="showcase">
    <h1>HEllo</h1>
</div>



<script src="boot-js/jquery-3.2.1.min.js "></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js "></script>
<script src="boot-js/naet.js "></script>
<script src="boot-js/typer.js"></script>