如何将没有 ID 的嵌套或子 html div 分配给 Javascript 变量？

Question

下面是 html 结构的格式：

<div class="material-list">
  <div class="wapf-field-label">...</div>
  <div class="wapf-field-input">
    <select data-field-id="369175" name="wapf[field_26326]" class="wapf-input">
      ... options ...
    </select>
  </div>
</div>

我想在 select 列表上使用 Javascript ，但它是.material-list 的孙子，没有 html id。 如何将 select 列表添加到 Javascript 变量？

Answer 1

这很简单，你有几种方法：

const select1 = document.querySelector('.material-list select')

或者你可以这样做：

const list = document.querySelector('.material-list')
const select2 = list.querySelector('select')

另一种方法是在您的情况下通过数据属性查看 select ：

const select = document.querySelector('select[data-field-id="369175"]')

请注意，document.querySelector 将始终返回第一个元素，因此如果您有多个 select 元素，则只会返回第一个 select。

因此，如果您想获取材料列表中的所有 select 元素，那么这应该可以：

const allSelectElements = document.querySelectorAll('.material-list select')