Как перебрать внутренние элементы в «document.querySelector»

Я использую chrome devtools для проверки html. У меня есть этот код, где я применяю querySelector для внутренних элементов:

var x = document.querySelectorAll(".search__results-list li");
var myarray = []
for (var i=0; i<x.length; i++){
    const href = x[i].querySelector('.ahchor[href]');
    const text = x[i].querySelector('.text-field');

    myarray.push([href, text]);
};

querySelector не существует на x[i], выдает ошибку Uncaught TypeError: [...].querySelector is not a function как это исправить?

вот образец html, на самом деле там много ли:

<ul class = "search__results-list">
  <li class = "search__result-container">
    <div class = "search-result">
      <div class = "search-result__item">
        <div class = "search-result_block">
          <div class = "center">
            <a class = "ahchor" href = "somesite.com/a">
              <div>
                <div class = "wrapper">
                  <div class = "entity">
                    <div class = "text-field">content here</div>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>