объясните, что делает каждая строчка этого кода , пожалуйста!!! JavaScript и html!! Важно узнать , что делает каждая строчка скрипта !

<ul id="ul">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
<li>пункт 4</li>
<li>пункт 5</li>
</ul>


Тут начинается скрипт


var li = document.querySelectorAll('#ul li');

//В цикле вешаем функцию addSign на каждую li:
for (var i = 0; i < li.length; i++) {
li[i].addEventListener('click', addSign);
}
function addSign() {
this.innerHTML = this.innerHTML + '!';
}​