Как строится DOM JavaScript?

Вообще не понимаю как этот DOM строится, пытаюсь на простом сайте запарсить данные и то не получается . вот исохдные данные. Моя задача выписать { инструкция, отзывы, О магазине...} в отдельный массив

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Переключить навигацию</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand nav-logo" href="/">
            <img src="/assets/img/logo.png" />
            <span>Keys Store</span></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li>
                <a class="navigation" href="/instruction.php">Инструкция</a>
            </li>
            <li>
                <a class="navigation" href="/reviews.php">Отзывы</a>
            </li>
            <li>
                <a class="navigation" href="/about.php">О магазине</a>
            </li>
            <li>
                <a class="navigation" href="/contacts.php">Контакты</a>
            </li>
        </ul>

а вот через библиотеку cheerio пытаюсь запарсить. если что мне именно надо в таком виде, через each(function(){

    var data ={};
$('div.class.id').each(function(){
     var text = ($(this).attr('a.navigation'));
     data.push(text);
   });
    console.log(data)