javascript - 如何将没有 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>

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

标签： javascript

Answer 1

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

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

或者你可以这样做：

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

另一种方法是在您的情况下按数据属性查看选择：

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

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

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

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