solucion a codigo

  <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;


document.querySelector('.total').textContent = calcularEdad(totalEdades,items);

     </script>

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




     </script>