JS如何选取包含subnav子ul的父li元素，现有写法报undefined如何解决

问题原因 #

document.querySelectorAll() 返回的是NodeList 类数组集合，其中包含了所有匹配到的.subnav元素，但集合本身没有parentNode属性，只有集合内的单个DOM节点才具备该属性，你直接对集合调用parentNode自然会返回undefined。

正确实现方式 #

方案1：遍历收集父节点（全浏览器兼容） #

先拿到所有.subnav元素，再遍历每个元素提取对应的父级li：

const subNavList = document.querySelectorAll('.wrapper .subnav');
const triggers = Array.from(subNavList).map(item => item.parentNode);
console.log(triggers);

方案2：使用:has()选择器直接匹配（现代浏览器兼容） #

CSS的:has()伪类可以直接选中包含指定后代的元素，一行代码即可完成筛选：

const triggers = document.querySelectorAll('.wrapper li:has(.subnav)');
console.log(triggers);

该方案支持Chrome 105+、Firefox 121+、Safari 15.4+版本浏览器，无需额外遍历操作。

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