如何修复遍历querySelectorAll结果时querySelector不存在的错误？

在Chrome DevTools调试HTML时，尝试遍历querySelectorAll获取的元素并使用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]);
};

运行时出现错误：Uncaught TypeError: [...].querySelector is not a function，提示x[i]不存在querySelector方法。

对应的HTML示例（实际包含多个li元素）：

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

• 过滤非元素节点：querySelectorAll返回的NodeList可能包含文本节点、注释节点等非HTMLElement类型的节点，这类节点没有querySelector方法。循环时添加判断跳过无效节点：

  var x = document.querySelectorAll(".search__results-list li");
  var myarray = []
  for (var i=0; i<x.length; i++){
      if (!(x[i] instanceof HTMLElement)) continue;
      const href = x[i].querySelector('.ahchor[href]');
      const text = x[i].querySelector('.text-field');
      myarray.push([href, text]);
  };
  

• 精确选择器：原选择器.search__results-list li会匹配所有后代<li>，如果页面存在嵌套<li>或非元素节点被误匹配，会导致x[i]不是有效元素。改用直接子选择器缩小范围：

  var x = document.querySelectorAll(".search__results-list > li");
  

• 避免变量污染：使用var声明的i存在变量提升问题，可能被外部代码干扰；同时x变量也可能被意外修改。换成let/const声明变量：

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

• 检查拼写一致性：确认选择器中的.ahchor与HTML里的class名称完全一致（比如是否应为anchor），避免因拼写错误导致元素查找失败。

内容的提问来源于stack exchange，提问作者Sergino