如何使用querySelectorAll筛选包含特定子元素的DOM元素？

解决方案 #

完全可以通过单条查询语句实现，根据你使用的查询语法不同，可选方案如下：

1. CSS 选择器方案 #

用 tr:has(td) 即可直接匹配所有包含<td>子元素的<tr>元素：

/* 原生CSS选择器（支持:has选择器的浏览器/运行环境均可使用） */
tr:has(td)

如果是JavaScript原生DOM查询，写法如下：

const targetTrList = document.querySelectorAll('tr:has(td)')

2. XPath 方案 #

如果使用XPath查询，语句为：

//tr[td]

3. jQuery 兼容方案 #

如果是需要兼容低版本浏览器的jQuery环境，写法为：

const targetTrList = $('tr').has('td')

以上所有方案均为单条语句，可直接匹配你示例HTML中所有包裹了<td>的<tr>元素，不会匹配到仅包含<th>的表头行。

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