Как получить все li, но без тех, которые в подменю?

console.log(document.querySelectorAll("ul.main-header__list li:not(ul.submenu li)").length);

<ul class="main-header__list">
  <li><a href="" class="main-header__link">Главная</a></li>
  <li><a href="" class="main-header__link main-header__link--add">Про компанию</a>
    <ul class="submenu">
      <li><a href="">Команда</a></li>
      <li><a href="">Наши партнеры</a></li>
      <li><a href="">Документация</a></li>
    </ul>
  </li>
  <li><a href="" class="main-header__link">услуги</a></li>
  <li><a href="" class="main-header__link">Наши роботы</a></li>
  <li><a href="" class="main-header__link">Блог</a></li>
  <li><a href="" class="main-header__link">Контакты</a></li>
</ul>

const result = [...document.querySelectorAll("ul.main-header__list>li>a.main-header__link")].map(item=>item.parentElement);

result.forEach(item=> console.log(item))

<ul class="main-header__list">
  <li><a href="" class="main-header__link">Главная</a></li>
  <li><a href="" class="main-header__link main-header__link--add">Про компанию</a>
    <ul class="submenu">
      <li><a href="">Команда</a></li>
      <li><a href="">Наши партнеры</a></li>
      <li><a href="">Документация</a></li>
    </ul>
  </li>
  <li><a href="" class="main-header__link">услуги</a></li>
  <li><a href="" class="main-header__link">Наши роботы</a></li>
  <li><a href="" class="main-header__link">Блог</a></li>
  <li><a href="" class="main-header__link">Контакты</a></li>
</ul>