在前端开发中，经常会遇到需要从多个 div 里获取 input 和 select 元素值的情况。使用 JavaScript 可以高效地完成这一任务。

要明确获取元素的基本方法。在 JavaScript 中，可以使用 document.querySelectorAll() 方法来选中多个 div 元素。例如，假设有多个具有特定类名的 div，如：

<div class="target-div">
  <input type="text" id="input1">
  <select id="select1">
    <option value="option1">选项 1</option>
    <option value="option2">选项 2</option>
  </select>
</div>
<div class="target-div">
  <input type="text" id="input2">
  <select id="select2">
    <option value="option3">选项 3</option>
    <option value="option4">选项 4</option>
  </select>
</div>

在 JavaScript 里，可以这样获取这些 div：

const targetDivs = document.querySelectorAll('.target-div');

接下来，遍历这些 div 元素，分别获取其中 input 和 select 元素的值。对于 input 元素，可以通过其 value 属性获取输入的值；对于 select 元素，同样通过 value 属性获取当前选中选项的值。示例代码如下：

targetDivs.forEach((div) => {
  const inputElement = div.querySelector('input');
  const selectElement = div.querySelector('select');

  if (inputElement) {
    const inputValue = inputElement.value;
    console.log('Input 值:', inputValue);
  }

  if (selectElement) {
    const selectValue = selectElement.value;
    console.log('Select 值:', selectValue);
  }
});

这段代码首先遍历每个 target-div，然后在每个 div 内部查找 input 和 select 元素。如果找到了相应元素，就获取并打印它们的值。

另外，如果页面结构复杂，div 的层次较多，或者 input 和 select 元素没有唯一的标识，那么在查找元素时需要更加精确的选择器。可以结合使用类名、标签名甚至属性选择器来确保准确选中所需元素。

通过合理运用 JavaScript 的 DOM 操作方法，能够轻松从多个 div 里获取 input 和 select 元素的值，为数据处理和业务逻辑实现提供有力支持。掌握这些技巧，能在前端开发中更加高效地完成相关功能。