如何用document.querySelectorAll选中不含指定嵌套类的ej-form-field父div

1. 核心需求：使用document.querySelectorAll选中带有ej-form-field类的父div，排除内部嵌套了带有dropdown-container类子元素的div。
2. 场景示例：下方代码中需要选中第一个和第三个floatContainer div，排除第二个（其内部包含dropdown-container类的嵌套元素）。
3. 原有尝试：编写的document.querySelectorAll(".ej-form-field:not([dropdown-container])")未达到预期效果。

示例代码 #

<!-- 要选中的元素 -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">First name</label>
  <div class="input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

<!-- 要排除的元素 -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">Last name</label>
  <div class="dropdown-container input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

<!-- 要选中的元素 -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">Telephone</label>
  <div class="input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

方法1：使用CSS :has()选择器（现代浏览器适用） #

主流新版浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已支持:has()相对选择器，可以直接基于后代元素特征筛选父元素，写法如下：

const targetElements = document.querySelectorAll(".ej-form-field:not(:has(.dropdown-container))");

方法2：兼容旧浏览器的过滤写法 #

如果需要适配不支持:has()的旧浏览器，可以先选中所有ej-form-field类元素，再通过过滤排除不符合要求的项：

// 先获取所有ej-form-field元素
const allFields = document.querySelectorAll(".ej-form-field");
// 过滤掉内部存在dropdown-container类子元素的项
const validFields = Array.from(allFields).filter(field => !field.querySelector(".dropdown-container"));

你原先使用的[dropdown-container]是属性选择器，只会排除自身带有dropdown-container属性的元素，和你需要判断的「内部子元素带有dropdown-container类」逻辑不符，因此无法生效。

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