如何在JavaScript循环中排除包含img元素的指定a标签？

首先看你的场景：要抓取带指定href规则的<a>标签，但要排除内部包含<img>的标签，只保留带文本内容的那个。你之前的选择器写法有问题，比如li a[href*='&searchType=subject'] li a:not([alt*='Find It'])里，a标签不可能包含li子元素，所以这个选择器根本选不到正确元素。下面给你两种可行的解决方案：

方法一：用CSS :has() + :not() 直接筛选（推荐现代浏览器使用） #

现代浏览器已经支持CSS的:has()伪类，它可以检测元素是否包含指定子元素，结合:not()就能直接排除包含img的a标签，写法非常简洁：

var Row = document.querySelector("#exploreTable");
// 核心选择器：选中符合href条件且不包含img子元素的a标签
var Cells = Row.querySelectorAll("li a[href*='&searchType=subject']:not(:has(img))");
let number = 1;
for (let i = 0; i < Cells.length; i++, number++ ) {
  console.log(number + ". " + Cells[i].innerText.trim());
}

原理很简单：:has(img)会匹配所有内部包含img的a标签，:not()则把这些匹配到的元素排除，最终只留下带文本内容的目标a标签。

方法二：遍历后过滤（兼容旧版浏览器） #

如果需要兼容不支持:has()的旧版浏览器，可以先选中所有符合href规则的a标签，再通过JS过滤掉包含img的元素：

var Row = document.querySelector("#exploreTable");
// 先选中所有符合href条件的a标签
var allLinks = Row.querySelectorAll("li a[href*='&searchType=subject']");
// 过滤掉内部包含img的标签
var Cells = Array.from(allLinks).filter(link => !link.querySelector('img'));
let number = 1;
for (let i = 0; i < Cells.length; i++, number++ ) {
  console.log(number + ". " + Cells[i].innerText.trim());
}

这里用Array.from()把NodeList转成数组，再用filter()方法检查每个a标签内部是否存在img——如果link.querySelector('img')返回null，说明这个标签里没有img，就保留下来。

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