Otra observacion

El codigo dado:

<ul>
    <li class="invitado">
        Nombre <span class="nombre">Diego</span>,
        edad <span class="edad">23</span>
    </li>
    <li class="invitado">
        Nombre <span class="nombre">Daniel</span>,
        edad <span class="edad">42</span>
    </li>    
    <li class="invitado">
        Nombre <span class="nombre">Marcos</span>,
        edad <span class="edad">27</span>
    </li>    
    <li class="invitado">
        Nombre <span class="nombre">Fabio</span>,
        edad <span class="edad">18</span>
    </li>

    Total de las edades: <span class="total"></span>
</ul>

<script>

    var items = document.querySelectorAll('.invitado);

    var totalEdades = 0;

    for(var i = 0; i < items .length; i++) {
        var edad = items[i].querySelector('.edad').textContent;
        totalEdades +=parseInt(edad);
    }

    document.querySelector('.total').textContent = totalEdades;

</script>

tiene un syntax error en al no cerrar comillas en la variable items:

var items = document.querySelectorAll('.invitado);

    var totalEdades = 0;

fuera de eso, la sugerencia, como lo menciono chris, es pasar el Script a un documento aparte y añadir la referencia.

Saludos.